无法更新 Vuex 存储和检索数组

Question

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

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

我正在调度对象数组

通过“actions”提交数组

通过“mutations”设置和更新值

通过“状态”声明数组

最后，从Vue组件，通过“getters”访问数组

我希望 Vuex 在我使用“getters”访问时返回对象数组

店铺代码如下

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”从组件分派到商店

  someFunction(){
            
    .....
    some code
    .....
    this.$store.dispatch('setLoading',false)
    this.$store.dispatch('setCompoData',{data:this.compoData})
           
            
        },
        
        
        

从存储中获取值

       
       
       gettingCompoData(){
            console.log(this.$store.getters.compoData)
            
        },

虽然它适用于计算变量“加载”，但它不适用于“compoData”对象数组。

我用下面的函数测试了它

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

这是我得到的结果的截图log result from the "test" function

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

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

Answer 1

你有一个错字。 在 store 中，您定义了一个 getter compoaData，当从 store 获取值时，您正在寻找 compoData