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

问题描述

我有一个从数据库中获取数据的操作，我将请求的响应分配给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)时，我得到的是未定义的或一些奇怪的数据，如下所示：

这没有任何意义，因为作为整个对象的 state 显然已填充并且是正确的数据，但是在组成该状态的单个对象中格式错误？ >

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

解决方法

您的错误是您正在使用操作来改变状态。您应该只使用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)
      });
     }
   }
})

,

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

创建Vue实例后，它将在其数据对象中找到的所有属性添加到Vue的反应性系统中。当这些属性的值更改时，视图将“反应”，并更新以匹配新值。

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

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