解决vuex页面刷新导致数据丢失问题

vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题:
1.使用vuex-along
2.使用localStorage或者sessionStroage

1.使用vuex-along

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

安装vuex-along:

1

npm install vuex-along --save

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

1

import VueXAlong from 'vuex-along' //导入插件

1

2

3

4

5

6

7

8

9

10

export default new Vuex.Store({

  //modules: {

    //controler //模块化vuex

  //},

  plugins: [VueXAlong({

    name: 'store',   //存放在localStroage或者sessionStroage 中的名字

    local: false,   //是否存放在local中 false 不存放 如果存放按照下面session的配置

    session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中

  })]

});

2.使用localStorage或者sessionStroage

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

created() {

  //在页面加载时读取sessionStorage里的状态信息

  if (sessionStorage.getItem("store")) {

   this.$store.replaceState(

    Object.assign(

     {},

     this.$store.state,

     JSON.parse(sessionStorage.getItem("store"))

    )

   );

  }

  //在页面刷新时将vuex里的信息保存到sessionStorage里

  window.addEventListener("beforeunload", () => {

   sessionStorage.setItem("store", JSON.stringify(this.$store.state));

  });

},

上面两种方法都可以解决vuex页面刷新导致数据丢失问题。按照上面的方法配置之后就可以正常使用vuex了,页面刷新数据也不会丢失了。

你可能感兴趣的:(前端开发,javascript,vue.js)