在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>
本篇文章转自https://www.jianshu.com/p/720c436edc1f