新手使用vuex使用请教

Question

 state () {
      return {
        tags: []
      }
    },
    mutations: {
      delTags(state,payload){
        console.log(payload,"-------")
        let temp  = state.tags.filter(element => {
          return element.path != payload.path;
        });
        //这样无法触发页面数据变动
        state.tags = temp
        //这样可以触发页面数据变动
        // state.tags.splice(1,1)
        console.log(state.tags,"==========")
      }

想请教一下，我这里在delTags方法里直接给state.tags赋值，页面数据不会跟着变。
但是使用splice方法是可以的，请问是为什么？

Answer 1

VueX官方文档中明确提到Mutations需要遵循Vue的响应规则，由于Vue2响应式原理限制，直接对数组赋值时数据不是响应式的，所以页面不会有变化。在操作数组和对象时应该使用原型链的方法，或者使用Vue.set(obj, 'newProp', 123)的方式，可参考：https://cn.vuejs.org/v2/api/#...