Vuex state页面刷新后数据不保留,关联可排序列表修改后刷新复原问题
问题原因
- 你做列表排序时直接修改了
store.getters.getItems返回的原引用内容:Vuex的getter返回的是state对应数据的引用,你在前端调整顺序的逻辑大概率直接改了这个引用指向的数组内部顺序,没有走mutation提交。这时候state的实际内容已经被篡改,所以你在mutation里打印赋值前后的内容看起来完全一致,相当于把已经改好的值又写了一遍。 - 你的项目应该接入了Vuex持久化插件(比如vuex-persistedstate),这类插件的默认工作逻辑是仅监听mutation的调用来同步state到本地存储(localStorage/sessionStorage)。你不走mutation直接改state引用的话,持久化插件监听不到数据变更,不会把最新的排序结果写入本地存储,刷新页面时插件读取的还是之前存储的旧数据,自然就回到了排序前的状态。
- 你保留的那段mutation赋值逻辑,本质作用是触发持久化插件的同步逻辑:你用
cloneDeep拷贝新值再赋值给state的操作属于合法的mutation提交,持久化插件会捕获到这次state变更,把最新的排序结果写入本地存储,刷新时就能读到新值了。
优化建议
- 不要直接修改getter返回的state引用,这违背了Vuex单向数据流的设计规范,容易导致数据变更不可追溯。正确的做法是排序操作完成后,把新的排序结果作为参数提交给mutation,在mutation内统一修改state的值。
内容的提问来源于stack exchange,提问作者user16732355
相关产品推荐
相关产品推荐

