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

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

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

然后，你可以这样写

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

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

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

Answer 2

您需要始终使用突变来更改状态。您可以从您的操作中调用一个：

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 对象以使其可观察：

Internally, Vue uses this on the object returned by the data function.

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

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

Can't access my store object from my component

javascript

vue.js

vuex

nuxt.js

vuex-modules