使用vuex-persistedstate解决页面刷新vuex数据丢失问题

我们都知道页面刷新后 vuex的数据会丢失,因为页面刷新会重新执行js脚本,数据是存在内存中的,页面刷新后这块空间自然就释放了没有了,可以使用vuex-persistedstate这个插件来将vuex的数据持久化到localstorage中,它会监听页面刷新事件,将数据存入本地存储,页面加载时再取出到vuex中,这样就解决了state丢失的问题,那么下面直接讲怎么用这个插件

1.首先安装vuex-persistedstate:

npm install --save vuex-persistedstate

2.在store中引入并配置到plugins中

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

如果是Vuex4.0+Vue3.0的项目:

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});

完成!这样页面刷新state就不会丢失啦~