vue-typescript-admin-template 项目开发 保持Vuex持久化的方法

vue-typescript-admin-template项目开发保持Vuex持久化的方法

vuex-persist
vuex-module-decorators

步骤：

1、安装 vuex-persist

指令：

npm install --save vuex-persist

or

yarn add vuex-persist

2、在 store/index.ts中添加

ts 用法：

import VuexPersistence from 'vuex-persist'

const vuexLocal = new VuexPersistence<RootState>({
  storage: window.localStorage
})

// 添加插件
const store = new Vuex.Store<State>({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin] //主要是这一行
})

3、修改store/test.model文件

我这里store下有一个user.model,你们就修改自己的文件

默认文件中为

@Module({ dynamic: true, store: store, name: 'user' })

要修改为

@Module({ dynamic: true, store: store, name: 'user', preserveState: true })

以下是官网vuex-module-decorators给出了2个方法：

当它没有初始状态并且您从 localStorage 加载状态时：

@Module({ dynamic: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })

如果您想保留状态，例如从 vuex-persist 加载状态时：

@Module({ dynamic: true, store: store, name: 'mm', preserveState: true })