无法读取 Vuex/Nuxt 中未定义的属性“名称”答案

【问题标题】：Cannot read property 'name' of undefined in Vuex/Nuxt无法读取 Vuex/Nuxt 中未定义的属性“名称”
【发布时间】：2021-03-03 09:46:21
【问题描述】：

我正在尝试在 nuxt 中重构我的 vuex，以将我的操作、突变、getter 和状态分离到不同的文件中，但现在我遇到了错误；

像这样存储/模板/state.js 文件

export const state = () => ({
  objective: {
    active: true,
    finished: false,
  },
  credence: {
    active: false,
    finished: false,
  },
  complete: {
    active: false,
    finished: false,
  },
  essentialScore: 50,
  socialScore: 0,
  governmentScore: 0,
  addressScore: 0,
  templateDetails: {
    name: 'love',
    services: [],
    credence: {
      essentials: {
        firstname: 25,
        lastname: 25,
      },
      socials: {},
      governmentId: {},
      address: {},
    },
  },
})

在我的组件中像这样

 templateName: {
      get() {
        return this.$store.state.template.templateDetails.name
      },
      set(value) {
        return this.$store.dispatch('template/setTemplateName', value)
      },
      //   },
    },

存储/模板/action.js

export default {
  setTemplateName({ commit }, payload) {
    commit('SET_TEMPLATE_NAME', payload)
  },
 
}

存储/模板/mutation.js

import Vue from 'vue'
export default {
  SET_TEMPLATE_NAME(state, payload) {
    state.templateDetails.name = payload
  },
}

【问题讨论】：

请添加您的商店文件。看看你如何实现 state.js
@Asimple 我将它们分成不同的填充物
我看到你把它们分开了，但是你是如何建立你的商店的？把它们放在一起？
@Asimple 好的，完成

标签： vue.js vuejs2 nuxt.js vuex

【解决方案1】：

如果您选择将模块拆分为不同的文件（用于状态、突变等），则应在每个文件中使用默认导出而不是 export const state。

export default () => ({
  templateDetails: {
    name: 'love',
    // ...
  }
})

仅当您的商店模块只有一个文件时，您使用的语法才有效。

见documentation here。

【讨论】：