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

Question

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

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

我正在调度对象数组

通过“actions”提交数组

通过“突变”设置和更新值

通过“state”声明数组

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

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

商店代码如下

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”从组件分派(dispatch)到存储

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

从商店获取值

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

虽然它可以很好地处理计算变量“loading”，但它不适用于“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

很明显，我没有发送未定义的数组。但我从商店获取者那里得到的信息是未定义的。奇怪的是，它适用于 bool 变量“loading”，并且确实返回有效结果。我很困惑为什么它不返回对象数组。请帮帮我...

如有任何帮助，我们将不胜感激。谢谢

Answer 1

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