无法从组件访问我的存储对象

Question

在我的存储模块/store/template.js中有：

const templateConfig = {
  branding: {
    button: {
      secondary: {
        background_color: '#603314',
        background_image: ''
      }
    }
  }
}

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

export const actions = {
  initializeStore (state) {
    state.branding = templateConfig.branding
  }
}

(在应用程序最初加载时调用initializeStore())

我想在组件中检索branding对象的品牌：

computed: {
  ...mapState({
    branding: state => state.template.branding
  })
}

但是，当我尝试console.log() branding时，我看到了以下情况：

​

​

为什么我不简单地看到branding对象呢？(这到底是什么？)

Answer 1

你需要总是使用突变来改变状态。你可以从你的行动中调用一个：

export const mutations = {
  SET_BRANDING(state, payload) {
    state.branding = payload;
  }
}
export const actions = {
  initializeStore ({ commit }) {
    commit('SET_BRANDING', templateConfig.branding);
  }
}

您在观察者中看到的是正常的，并且表明branding对象已经成功地被映射和访问。

您看到的是Vue的observable对象，这就是Vue实现反应性的方式。如果没有这一点，就不会有任何反应性，您将在所有顶级反应性对象上看到这样的包装器。你可以假装它不在那里。

实际上，Vue在内部将同样的“包装器”应用于data对象，以使其可观察到：

在

内部，Vue在数据函数返回的对象上使用此方法。

您将不会在其他反应性属性上看到它，但是如果它们是反应性的，则它们属于某个可观察到的父对象。

Answer 2

您需要import { mapState, mapActions } from 'vuex' (我猜已经完成了)。

然后，你可以写这个

...mapState(['branding']) // or ...mapState('@namespacedModule', ['branding'])

尽管如此，你为什么不直接(用你的background_color)来描述这个国家，而不是进行一个Vuex行动呢？

如果希望保持这种状态，请在尝试访问状态之前，不要忘记在组件中使用await this.initializeStore()。