在uniapp中使用vuex如何将modules模块持久化存储？

问题

H5应用中存在Vuex中的数据在刷新页面后丢失了。

原因

Vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 Vue 实例，Vuex数据会重新初始化，导致页面刷新Vuex中的数据丢失的问题。

解决方法

使用 vuex-persistedstate 插件

解决步骤

1.安装插件

npm install --save vuex-persistedstate

2.在store/index.js中配置

import createPersistedState from 'vuex-persistedstate' // 引入数据持久化插件
import Vue from "vue"
import Vuex from "vuex"
import system from "@/store/modules/system.js"
import cars from "@/store/modules/cars.js"
import getters from "./getters"
Vue.use(Vuex)

const store = new Vuex.Store({
	getters,
	modules:{
		system,
		cars
	},	
	plugins: [
		createPersistedState({
			paths: ['cars'],
			storage: { // 存储方式定义  
				getItem: (key) => uni.getStorageSync(key), // 获取  
				setItem: (key, value) => uni.setStorageSync(key, value), // 存储  
				removeItem: (key) => uni.removeStorageSync(key) // 删除  
			}
		})
	]
})

export default store

插件的api说明：

• key: 存储持久状态的key（默认vuex）
• reduce： 存储持久状态的key（默认vuex）
• paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）
• reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。
• subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
• storage ：而不是（或与）getState和setState。默认为localStorage。
• getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。
• setState ：将被调用来保持给定状态的函数。默认使用storage。
• filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true