在Vuex和组件内的视图更新问题

由于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>