uniApp中使用vuex-persistedstate数据持久化
第一步：npm i vuex-persistedstate
第二步：在store.js文件中引入并进行配置
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex); //vue的插件机制
//Vuex.Store 构造器选项
const store = new Vuex.Store({
plugins: [createPersistedState({
storage: {
getItem: key => uni.getStorageSync(key),
setItem: (key, value) => uni.setStorageSync(key, value),
removeItem: key => uni.removeStorageSync(key)
}
})],
state: { //存放状态
list: [{
id: 1,
title: "安全复工",
children: [{
id: 11,
names: "员工健康",
name: "star"
},
{
id: 12,
names: "直播",
name: "phone"
},
{
id: 13,
names: "考勤打卡",
name: "email"
},
{
id: 14,
names: "智能办公",
name: "heart"
},
]
},
{
id: 2,
title: "校勤管理",
children: [{
id: 21,
names: "健康",
name: "star"
},
{
id: 22,
names: "直播带货",
name: "phone"
},
{
id: 23,
names: "打卡",
name: "email"
},
{
id: 24,
names: "办公",
name: "heart"
},
]
},
{
id: 3,
title: "家校互联",
children: [{
id: 31,
names: "互联",
name: "star"
},
{
id: 32,
names: "购物",
name: "phone"
},
{
id: 33,
names: "旅游",
name: "email"
},
{
id: 34,
names: "办公平台",
name: "heart"
},
]
},
{
id: 4,
title: "教职工服务",
children: [{
id: 41,
names: "老师",
name: "star"
},
{
id: 42,
names: "学生",
name: "phone"
},
{
id: 43,
names: "住宿",
name: "email"
},
{
id: 44,
names: "交卡",
name: "heart"
},
]
}
],
addApp: [],
all: []
},
mutations: {
// 添加
addA(state, its) {
let index = state.addApp.findIndex(i => i == its)
console.log('index:' + index)
if (index == -1) {
state.addApp.push(its)
}
console.log(state.addApp)
},
// 查找
look(state, key) {
state.all = []
let is = []
state.list.forEach(item => {
is = is.concat(item.children)
})
for (let i = 0; i < is.length; i++) {
if (is[i].names.indexOf(key) != -1) {
state.all.push(is[i])
}
}
}
},
})
export default store