Método de desarrollo de proyectos Vue-typescript-admin-template para mantener la persistencia de Vuex

Método de desarrollo de proyectos Vue-typescript-admin-template para mantener la persistencia de Vuex

vuex-persist
vuex-module-decoradores

paso:

1. Instale vuex-persist

instrucción:

npm install --save vuex-persist

o

yarn add vuex-persist

2. store/index.tsAgregar

uso 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. Modifique el archivo store/test.model

Tengo uno en la tienda aquí user.model, puedes modificar tus propios archivos.

En el archivo predeterminado está

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

要修改为

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

Los siguientes son dos métodos proporcionados por el sitio web oficial vuex-module-decorators :

Cuando no tiene un estado inicial y carga el estado desde localStorage:

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

Si desea conservar el estado, por ejemplo al cargar el estado desde vuex-persist:

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