我们都知道页面刷新后 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就不会丢失啦~