时间戳

首页 > 解决方案 > 无法读取 Vuex/Nuxt 中未定义的属性“名称”

vue.js - 无法读取 Vuex/Nuxt 中未定义的属性“名称”

问题描述

我正在尝试在 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
  },
}

标签： vue.jsvuejs2nuxt.jsvuex

解决方案

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

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

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

请参阅此处的文档。

推荐阅读