Vue/Vuex: двустороннее вычисляемое свойство — undefined не является объектом при перезагрузке

Я создаю форму, в которой данные поступают из внешнего 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')

Из других тем, которые я читал, проблема в том, что вычисляемое свойство равно 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;
  },
}

javascript vue.js computed-properties vuex
person Cenasa    schedule 25.01.2021    source источник
comment
пожалуйста, поделитесь своим состоянием магазина   -  person Boussadjra Brahim    schedule 25.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны инициализировать свойство email в своем состоянии пустой строкой, чтобы оно было определено при начальной загрузке:

export const state = () => ({
  customer: { email : ""},
})
person Boussadjra Brahim    schedule 25.01.2021