关于 javascript:无法更新 Vuex 存储和检索数组

Unable to update the Vuex store and retrieve array

我正在将一组对象分派到 Veux 存储并尝试使用来自 Vuex 的"getter"获取数据。它返回未定义。然而,它适用于同一个 Vuex 中的布尔变量。对于数组,它没有给出正确的结果

我正在使用 Vuex 来更新跨 vue 组件的对象数组。

我正在调度对象数组

通过"actions"提交数组

通过"mutations"设置和更新值

通过"state"声明数组

最后,从Vue组件,通过"getters"访问数组

当我使用"getter"访问时,我希望 Vuex 返回对象数组

店铺代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
export default new Vuex.Store({
  state: {
   
      loading: false,
      compoData: []
  },

  mutations: {
 
    setLoading(state, payload) {
      state.loading = payload
    },

    setCompoData(state, payload) {
       state.compoData = payload.data
     }
  },


actions: {
   
    setLoading({
      commit
    }, payload) {
      commit('setLoading', payload)
    },

    setCompoData({
      commit
    }, payload) {
      commit('setCompoData', payload)
    },

  },
 
 
  getters: {
   
    loading(state) {
      return state.loading
    },
   
    compoaData(state){
      return state.compoData
    }

  }
})

Vue 组件代码如下。我正在将对象数组"compoData"从组件分派到 store

1
2
3
4
5
6
7
8
9
10
  someFunction(){
           
    .....
    some code
    .....
    this.$store.dispatch('setLoading',false)
    this.$store.dispatch('setCompoData',{data:this.compoData})
           
           
        },

从商店获取值

1
2
3
4
       gettingCompoData(){
            console.log(this.$store.getters.compoData)
           
        },

虽然它对计算变量"加载"工作正常,但它不适用于对象的"compoData"数组。

我用下面的函数测试了它

1
2
3
4
5
test(){
    console.log(this.compoData, this.loading);
    this.$store.dispatch('setCompoData',{data:this.compoData})
    console.log(this.$store.getters.compoData, this.$store.getters.loading)
},

这是我从"test"函数得到的这个日志结果的截图

很明显,我没有发送未定义的数组。但是我从商店吸气剂那里得到的东西是不确定的。奇怪的是,它正在为布尔变量"加载"工作,并且它确实返回了一个有效的结果。我很困惑为什么它不返回对象数组。请帮帮我...

任何帮助将不胜感激。谢谢


你打错了。
在商店中您定义了一个 getter compoaData 并且当您从商店中获取值时您正在寻找 compoData