vuex可以集中式存储管理应用的所有组件的状态,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新
但是,最近踩了vuex的坑:
场景
第一次进入页面加载数据,数据不显示,点击某个按钮或者切换页面后,数据会展示出来
通过分析发现,当第一次加载页面的时候,获取数据的数据为{} (空对象),当数据获取完毕,执行commit()
而此时通过commit()已经改变了state中的数据,在页面中通过computed也可以获取更新后的数据。但是视图没有更新,获取的数据没有展示出来
解决
尝试在页面中发送commit()来再次更新视图,无效
将Vue.set(state, ‘myData’, data),无效
…
最终方案:
代码中所声明的对象里面的key是动态的,所以初始只声明了{ }。
原来,数据是数组的时候,不能通过索引直接进行赋值,也不能修改数组的长度。
而Vuex只会跟踪在对象创建时就存在的属性,新添加到对象上的新属性不会触发更新。
并且循环嵌套层级太深,视图也可能不更新
最终,给数组对象赋值,这里转化了一下写法,生效。具体如下:
const