由于js的限制,vue无法进行监听数组;
- 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如： vm.items.length = newLength
- 直接给对象赋值新属性
解决方式：
Vue.set( target, key, value )
测试代码：
Store的代码：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
TestArr: [1,2,5],
TestObj:{ name:'YK' }
},
getters: {
TestArr_getters: state => {
return state.TestArr
}
},
mutations: {
changeTestArr(state, obj) {
//state.TestArr[2]=3
//上面是错误演示，会改变值，但视图不会更新，在组件内同理
Vue.set(state.TestArr,2,3) //正确演示
// state.TestObj.age=11
//上面是错误演示，会改变值，但视图不会更新，在组件内同理
Vue.set(state.TestObj,'age',11)//正确演示
}
},
actions: {
changeTestArr_action(context){
setTimeout(function () {
context.commit('changeTestArr')
}, 1000)
}
}
});
组件内的代码：
<template>
<div>
<p>state的值:{{$store.state.TestArr}}</p>
<p>getterste的值:{{TestArr_getters}}</p>
<p>TestObj的值：{{TestObj}}</p>
<button @click="fun1">改变</button>
</div>
</template>
<script>
import {mapGetters,mapState} from 'vuex'
export default {
name: '',
computed:{
...mapState(['TestObj']),
...mapGetters(['TestArr_getters']),
},
methods:{
fun1(){
this.$store.dispatch('changeTestArr_action')
}
}
};
</script>
