问答题5题:刷新浏览器后,Vuex的数据是否存在?如何解决?

难度:
更新时间:2022-05-12

参考答案:

在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。

原因:因为 store 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化。

我们有两种方法解决该问题:

  1. 使用 vuex-along
  2. 使用 localStorage 或者 sessionStroage

使用vuex-along

vuex-along 的实质也是将 vuex 中的数据存放到 localStorage 或者 sessionStroage 中,只不过这个存取过程组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单介绍一下 vuex-along 的使用方法。

安装 vuex-along:

npm install vuex-along --save

配置 vuex-along: 在 store/index.js 中最后添加以下代码:

1import VueXAlong from 'vuex-along' //导入插件 2export default new Vuex.Store({ 3 //modules: { 4 //controler //模块化vuex 5 //}, 6 plugins: [VueXAlong({ 7 name: 'store', //存放在localStroage或者sessionStroage 中的名字 8 local: false, //是否存放在local中 false 不存放 如果存放按照下面session的配置 9 session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中 10 })] 11});

使用 localStorage 或者 sessionStroage

1created() { 2 //在页面加载时读取sessionStorage里的状态信息 3 if (sessionStorage.getItem("store")) { 4 this.$store.replaceState( 5 Object.assign( 6 {}, 7 this.$store.state, 8 JSON.parse(sessionStorage.getItem("store")) 9 ) 10 ); 11 } 12 //在页面刷新时将vuex里的信息保存到sessionStorage里 13 window.addEventListener("beforeunload", () => { 14 sessionStorage.setItem("store", JSON.stringify(this.$store.state)); 15 }); 16},
预览

小程序刷题更方便

预览

关注公众号获取最新面经

预览

加面试交流群

赞赏支持

预览

题库维护不易,您的支持就是我们最大的动力!