vue中的vuex的数据持久化
首先,什么是vuex?vuex就是一个集中式的状态管理工具,在许多页面需要共享同一个或者多个值/状态的时候就会用到vuex, 但是,vuex不同于cookie和localStroage, 页面刷新, state中的数据就会丢失。因此我们需要对vuex中的状态做持久化的处理。使用插件 vuex-persistedstate 对数据进行数据的持久化处理1.安装npm install vuex-pers
·
首先,什么是vuex?vuex就是一个集中式的状态管理工具,在许多页面需要共享同一个或者多个值/状态的时候就会用到vuex, 但是,vuex不同于cookie和localStroage, 页面刷新, state中的数据就会丢失。因此我们需要对vuex中的状态做持久化的处理。
使用插件 vuex-persistedstate 对数据进行数据的持久化处理
1.安装
npm install vuex-persistedstate --save
在store下的index.js下引入
import createPersistedState from "vuex-persistedstate";
使用:
// 数据的持久化处理
plugins: [
createPersistedState({
// 存储方式:localStorage、sessionStorage、cookies
storage: window.cookies,//存储到cookie
// storage:window.sessionStorage 存储到sessionStorage
// 如果不写默认存储到localStorage
// 存储的 key 的key值
key: "store",
render(state) {
// 要存储的数据:本项目采用es6扩展运算符的方式存储了state中所有的数据
return { ...state };
//需要存储其中的某些数据的话需要单独取出来
// return {
//只储存state中的assessmentData
//assessmentData: val.assessmentData
//}
})
]
也可以使用多个插件
plugins要是一个一维数组不然会解析错误
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
补充,实际开发中,我们不会把所有的状态都只放在一个state中,所以就有了modules
当我们有多个vuex状态的时候
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user.js' //这是专门管理user的
import admin from './admin.js' // 这是专门管理admin的
Vue.use(Vuex)
let storeRoot={
state: {
},
mutations: {
},
actions: {
},
modules: {
//在这里进行引用
user,
admin
}
}
export default new Vuex.Store(storeRoot) //导出
admin文件
let admin={
namespaced: true,
state: {
},
mutations: {
},
actions: {
}
}
}
export default admin
文章到此结束,加油,前端的路还很远!!!!!!!
更多推荐
已为社区贡献1条内容
所有评论(0)