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
  })
}

...我收到此错误：

<块引用>

无法读取未定义的属性 'secondary'

为什么？

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

import { mapActions } from 'vuex'

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

Answer 1

错误意味着当时状态只有其初始值，并且尚未调用操作（在子映射状态后父正在安装）。您可以尝试在父级的 created 挂钩中执行操作。

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

import templateConfig from '@/config.json'

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

动作/变异无论如何都不会使用有效载荷。

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

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

1 个答案: