关于vuex更新视图引发的思考

vuex可以集中式存储管理应用的所有组件的状态，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新

但是，最近踩了vuex的坑：

场景

第一次进入页面加载数据，数据不显示，点击某个按钮或者切换页面后，数据会展示出来 通过分析发现，当第一次加载页面的时候，获取数据的数据为{} (空对象)，当数据获取完毕，执行commit() 而此时通过commit()已经改变了state中的数据，在页面中通过computed也可以获取更新后的数据。但是视图没有更新，获取的数据没有展示出来

解决

尝试在页面中发送commit()来再次更新视图，无效

将Vue.set(state, ‘myData’, data)，无效

…

最终方案：

代码中所声明的对象里面的key是动态的，所以初始只声明了{ }。 原来，数据是数组的时候，不能通过索引直接进行赋值，也不能修改数组的长度。 而Vuex只会跟踪在对象创建时就存在的属性，新添加到对象上的新属性不会触发更新。

并且循环嵌套层级太深，视图也可能不更新

最终，给数组对象赋值，这里转化了一下写法，生效。具体如下：

const store = new Vuex.Store({
  state: {
    myData: []
  },
  mutations: {
    setData(state, data) {
      // state.myData = data  不更新视图
      Vue.set(state, 'myData', JSON.parse(JSON.stringify(data)))
    }
  },
  actions: {
    myFn () {
      store.commit('setData')
    }
  }
})

export default store
复制代码

如果添加了新的对象属性，也可以使用Object.assign()，但必须深拷贝（否则加到对象上的新属性不会触发更新）

let someObject = Object.assign({}, someObject, {newField: value}) // 深拷贝
// Object.assign(this.someObject, { key: 1 }) // 浅拷贝
复制代码

总结

不能直接去改变 store 中的状态。改变 store 中的状态的需要提交 (commit) mutation 在组件中调用 store 中的状态在计算属性中返回即可获取，也可以直接$store.state来获取

computed: {
    myData () {
      return store.state.myData
    }
},
mounted() {
    console.log(this.store.state.myData)
}
复制代码

为数组添加新属性并不会触发视图更新，因为vue没有给新属性增加get和set监听

赋值的数据，如果循环嵌套层级太深，可能会导致视图不更新

扩展

这些方法操作数组，vue可以检测到数据变化：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
复制代码

而下面这些不会改变原数组（返回了新数组），vue检测不到：

filter()
concat()
slice()

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27 提取码: yu27 百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址

码云地址： http://github.crmeb.net/u/defu

Github 地址： http://github.crmeb.net/u/defu