无法访问 Vuex 存储对象的属性

Question

我使用名为 config.json:

的 JSON 文件初始化我的商店

{
  "branding": {
    "button": {
      "secondary": {
        "background_color": "#EC6B24",
        ...
      },
      ...
    }
  }
}

...我在我的商店中导入：

import templateConfig from '@/config.json'

export const state = () => ({
  branding: {}
})

export const mutations = {
  setConfig (state, data) {
    state.branding = templateConfig.branding
  }
}

export const actions = {
  initializeStore ({ state, commit }, data) {
    commit('setConfig', data)
  }
}

现在，在我视图的 mounted 挂钩中，我调用我的存储操作 (this.initializeStore())，以便在页面加载时填充存储。

问题是，当我在视图的一个子组件中尝试访问嵌套的属性时，如下所示：

computed: {
  ...mapState({
    bgColor: state => state.template.branding.button.secondary.background_color
  })
}

...我收到此错误：

Cannot read property 'secondary' of undefined

为什么？

编辑：下面是父视图组件的代码。

import { mapActions } from 'vuex'

export default {
  mounted () {
    this.initializeStore()
  },
  methods: {
    ...mapActions({
      initializeStore: 'initializeStore'
    })
  }
}

Answer 1

该错误表示当时状态只有初始值，尚未调用操作（parent 在 child 映射状态后挂载）。您可以尝试 parent 的 created 挂钩中的操作。

但是，如果 initializeStore 在初始化时只调用一次，您可以完全删除该操作（和突变），并直接从导入的 json 定义您的 state：

import templateConfig from '@/config.json'

export const state = () => ({
  branding: templateConfig.branding
})

动作/突变永远不会使用负载。

如果数据是获取而不是导入，我建议查看 nuxtServerInit and/or fetch / asyncData 挂钩。

无法访问 Vuex 存储对象的属性

Can't access property of Vuex store object

vue.js

vue-component

vuex

nuxt.js

vuex-modules

无法访问 Vuex 存储对象的 属性

Can't access property of Vuex store object

vue.js

vue-component

vuex

nuxt.js

vuex-modules

无法访问 Vuex 存储对象的属性