目录Vuex状态持久化在vue和nuxt.js的区别Vue使用Nuxtvue的vuex的数据持久化使用插件vuex-persistedstate对数据进行数据的持久化处理plugin
相信很多人对 vue 中的 vuex 状态持久化已经很熟悉了,使用 vuex-persistedstate 或者 vuex-persist 即可。
这里推荐使用前者,因为 vuex-persist 基于 ts ,webpack 未经配置打包 ts 有问题,而且在 ie 中存在问题。
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [persistedState()]
})
更换 sessionStorage 存储方式:
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [
persistedState({ storage: window.sessionStorage })
]
})
使用 cookie 存储:
import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
// ...
plugins: [
persistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
因为每次请求都自带 cookies ,所以可以在第一次进入页面的 nuxt 服务端初始化方法 nuxtServerInit 中将 cookies 存到 vuex 状态树中。
由于是服务端获取 cookies ,js-cookie 不再适用,需要使用 cookie-universal-nuxt :
npm install cookie-universal-nuxt
之后在 store/index.js 中:
// 定义行为
const actions = {
// nuxt提供的,每次发送请求都会先调用此方法 ,并且第1个参数store, 该方法的第2个参数是context
nuxtServerInit({commit}, {app}) {
const data = {}
data.accessToken = app.$cookies.get('accessToken')
// 更新 vuex 状态树
commit('UPDATE_ALL_STATE', data)
}
}
这里的 app.$cookies.get 是 cookie-universal-nuxt 给我们提供的在服务端获取 cookies 的方法。
他等价于使用 context 中的 req 对象获取 cookie :req.headers.cookie 之后解析出我们需要的对象值。
那问题来了,既然都有原生 vuex 状态持久化方法了为什么还要用 nuxt 的方法,因为在 created 的时候 window 对象不能使用(包括 cookie 和 loaclStorage),只能在 mounted 使用,于是在页面加载的一瞬间不能加载状态树,导致页面数据反馈变慢,而 nuxt 的策略就可以优化这个问题,十分人性化。
首先,什么是vuex?vuex就是一个集中式的状态管理工具,在许多页面需要共享同一个或者多个值/状态的时候就会用到vuex, 但是,vuex不同于cookie和localStroage, 页面刷新, state中的数据就会丢失。因此我们需要对vuex中的状态做持久化的处理。
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: 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
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vuex状态持久化在vue和nuxt.js中的区别说明
本文链接: https://lsjlt.com/news/145201.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0