vue.js - 无法访问 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钩子(Hook)，我调用我的存储操作 ( this.initializeStore())，以便在页面加载时填充存储。
问题是，当我在 View 的一个子组件中尝试访问嵌套属性时，如下所示:

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

...我收到此错误:

Cannot read property 'secondary' of undefined

为什么？
编辑:下面是父 View 组件的代码。

import { mapActions } from 'vuex'

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

Answer 1

该错误意味着该状态当时只有其初始值，并且尚未调用该操作(父级在子级映射状态后正在安装)。您可以尝试 parent 的created中的操作取而代之的是钩子(Hook)。
但是，如果 initializeStore仅在初始化时调用一次，您可以完全删除该操作(和突变)，只需定义您的 state直接从导入的 json 中:

import templateConfig from '@/config.json'

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

无论如何， Action /突变永远不会使用有效负载。
如果是获取数据而不是导入数据，我建议查看 nuxtServerInit 和/或 fetch/ asyncData钩子(Hook)。