页面持久化-vuex-persistedstate

https://github.com/robinvdvleuten/vuex-persistedstate

遇到的问题：每次刷新页面都会回到初始状态，无法保存刷新前的状态。(例：侧边栏折叠，初始时侧边栏处于折叠状态，刷新页面后会回到展开的状态)

方法：

下载包   npm install --save vuex-persistedstate

在store.js中引入  import createPersistedState from "vuex-persistedstate";

并在store中引入createPersistedState方法，默认是将state中的状态都保存

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

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

增加paths可指定需要持久化的变量，data将持久保存，存入本地llocalStorage中

const dataState = createPersistedState({
  paths: ['isCollapsed']
})

之后每次刷新页面都会回到保留刷新前的状态。