无法从我的组件访问我的商店对象

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

你需要总是使用一个mutation来改变状态。您可以从您的操作中调用一个：

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 在 data 函数返回的对象上使用 this。

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

---

Answer 2

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

然后，你可以写这个

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

不过，为什么不直接（使用 background_color）直接放置状态而不是通过 Vuex 操作？

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