无法读取 Vuex/Nuxt 中未定义的 属性 'name'

Question

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

store/template/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)
      },
      //   },
    },

store/template/action.js

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

store/template/mutation.js

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

Answer 1

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

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

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

参见documentation here。