如何 return 从组件中的 vuex 操作状态数据

Question

我有一个从我的数据库中获取数据的操作，我将请求的响应分配给 vuex 存储中状态中的各种 objects/variables，然后在 app.js

代码看起来像这样：

store.js

actions: {
  getData(context) {
    axios.get('/getData').then(function(res) {
        context.state.var = res.data.SomeArray.var;
        context.state.var2 = res.data.SomeArray.var2;
      }
    );
  }
}

调度操作和日志以控制状态和状态数据

app.js

const app = new Vue({
    el: '#app',
    store: store,
    async created() {
      await this.$store.dispatch('getData')
      console.log(this.$store.state)
      console.log(this.$store.state.var)
    }
});

当我使用 console.log(this.$store.state) 和 console.log(this.$store.state.var) 打印状态时，会记录具有适当值的正确对象。然后我尝试将状态数据传播到各种组件。

问题是当我尝试从我的实际组件 中的状态访问单个对象/变量时。当我尝试 console.log(this.$store.state.var) 甚至 console.log(store.state.var) 时，我得到 undefined 或一些看起来像这样的奇怪数据：

这没有任何意义，因为作为整个对象的 state 显然得到了填充并且是正确的数据，但是构成状态的各个对象格式不正确？ !

我引用数据是否不正确，我需要从它所在的文件中导入状态吗？

Answer 1

对于 console.log 的问题，请在创建数据对象时使用 Object.freeze()。

When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values.

The only exception to this being the use of Object.freeze(), which prevents existing properties from being changed, which also means the reactivity system can’t track changes.

https://vuejs.org/v2/guide/instance.html#Data-and-Methods

Answer 2

你的错误是你正在使用动作改变状态。您应该只使用 mutations.

来改变状态

根据 Vuex documentation,

The only way to actually change state in a Vuex store is by committing a mutation

下面是如何完成的示例

const store = new Vuex.Store({
  state: {
    var: {},
    var2: {},
  },
  mutations: {
    setVariables (state, payload) {
      // mutate state
      state.var = payload.var;
      state.var2 = payload.var2;
    }
  }
   actions:{
     getData(context){
      axios.get('/getData').then(function(res){
        context.commit('setVariables', res.data.SomeArray)
      });
     }
   }
})

如何 return 从组件中的 vuex 操作状态数据

How to return state data from vuex action in components

javascript

flux

vue.js

vuex

vuex-modules