如何从组件中的 vuex 操作返回状态数据答案

【问题标题】：How to return state data from vuex action in components如何从组件中的 vuex 操作返回状态数据
【发布时间】：2020-12-11 01:27:43
【问题描述】：

我有一个从我的数据库中获取数据的操作，我将来自请求的响应分配给我的 vuex 存储中状态中的各种对象/变量，然后在 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 作为一个整体对象，显然被填充并且是正确的数据，但在构成状态的各个对象中格式错误？！ p>

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

【问题讨论】：

标签： javascript vue.js vuex flux vuex-modules

【解决方案1】：

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

根据 Vuex documentation，

在 Vuex 存储中真正改变状态的唯一方法是提交一个突变

以下是如何完成的示例

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

【讨论】：

【解决方案2】：

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

当一个 Vue 实例被创建时，它会将在其数据对象中找到的所有属性添加到 Vue 的反应系统中。当这些属性的值发生变化时，视图将“做出反应”，更新以匹配新值。

唯一的例外是使用 Object.freeze()，它可以防止现有属性被更改，这也意味着反应系统无法跟踪更改。

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

【讨论】：