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