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

Question

我正在创建一个表单，其中数据来自外部 api并存储在Vuex中。我在官方Vuex 文档中实现了双向计算属性

<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')

从我读过的其他线程来看，问题在于reload 上的计算属性为 null。但在执行v-if指令后，我仍然收到此错误。我想我需要找到一种方法，该属性不为空，就像后备一样，它返回一个空字符串。

VueX 商店：

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

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

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

标签： javascriptvue.jsvuexcomputed-properties

Answer 1

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

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