Vue / Vuex：双向计算属性 - 未定义不是重新加载的对象

Posted 2023-02-23

【中文标题】Vue / Vuex：双向计算属性 - 未定义不是重新加载的对象

【英文标题】：Vue/Vuex: Two-way Computed Property - undefined is not an object on reload

【发布时间】：2021-04-29 14:16:19

【问题描述】：

我正在创建一个 表单，其中数据来自 外部 api 并存储在 Vuex 中。我在官方Vuex Documentation

中实现了

双向计算属性

<template>
    <form>
          <div v-if="email">
            <label for="email">E-Mail</label>
            <input v-model="email" type="email" id="email">
          </div>
    </form>
</template>

<script>
export default 
  computed: 
    email: 
      get() 
        return this.$store.state.shop.customer.customer.email;
      ,
      set(value) 
        this.$store.commit('shop/customer/updateEmail', value);
      
    ,
  

</script>

当我通过路由访问组件时，一切正常。但是如果我重新加载页面，我会收到错误：

undefined is not an object (evaluating 'this.$store.state.shop.customer.customer.email')

从我读过的其他线程来看，问题在于，计算的属性是重新加载时为空。但在实施v-if 指令后，我仍然收到此错误。我想我需要找到一种方法，该属性不为空，就像一个回退，它返回一个空字符串。

VueX 商店：

export const state = () => (
  customer: ,
)

export const getters = 
  customer: state => state.customer,


export const mutations = 
  updateEmail(state, email) 
    state.customer.email = email;
  ,

【问题讨论】：

请分享您的商店状态

【参考方案1】：

您应该使用空字符串在您的状态中初始化email 属性，以便在初始加载时定义：

export const state = () => (
  customer:  email : "",
)