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

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

但是，最近踩了vuex的坑：

场景

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

解决

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

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

…

最终方案：

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

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

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

const