vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說(shuō)明
vuex狀態(tài)持久化在vue和nuxt.js的區(qū)別
Vue
相信很多人對(duì) vue 中的 vuex 狀態(tài)持久化已經(jīng)很熟悉了，使用 vuex-persistedstate 或者 vuex-persist 即可。
這里推薦使用前者，因?yàn)?vuex-persist 基于 ts ，webpack 未經(jīng)配置打包 ts 有問(wèn)題，而且在 ie 中存在問(wèn)題。
使用
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
? ? // ...
? ? plugins: [persistedState()]
})更換 sessionStorage 存儲(chǔ)方式：
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
? ? // ...
? ? plugins: [
? ? ?? ?persistedState({ storage: window.sessionStorage })
? ? ]
})使用 cookie 存儲(chǔ)：
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)
? ? ? }
? ? })
? ]
})Nuxt
因?yàn)槊看握?qǐng)求都自帶 cookies ，所以可以在第一次進(jìn)入頁(yè)面的 nuxt 服務(wù)端初始化方法 nuxtServerInit 中將 cookies 存到 vuex 狀態(tài)樹(shù)中。
由于是服務(wù)端獲取 cookies ，js-cookie 不再適用，需要使用 cookie-universal-nuxt ：
npm install cookie-universal-nuxt
之后在 store/index.js 中：
// 定義行為
const actions = {
? ? // nuxt提供的，每次發(fā)送請(qǐng)求都會(huì)先調(diào)用此方法 ，并且第1個(gè)參數(shù)store, 該方法的第2個(gè)參數(shù)是context
? ? nuxtServerInit({commit}, {app}) {
? ? ? ? const data = {}
? ? ? ? data.accessToken = app.$cookies.get('accessToken')
? ? ? ? // 更新 vuex 狀態(tài)樹(shù)
? ? ? ? commit('UPDATE_ALL_STATE', data)
? ? }
?}這里的 app.$cookies.get 是 cookie-universal-nuxt 給我們提供的在服務(wù)端獲取 cookies 的方法。
他等價(jià)于使用 context 中的 req 對(duì)象獲取 cookie ：req.headers.cookie 之后解析出我們需要的對(duì)象值。
那問(wèn)題來(lái)了，既然都有原生 vuex 狀態(tài)持久化方法了為什么還要用 nuxt 的方法，因?yàn)樵?created 的時(shí)候 window 對(duì)象不能使用（包括 cookie 和 loaclStorage），只能在 mounted 使用，于是在頁(yè)面加載的一瞬間不能加載狀態(tài)樹(shù)，導(dǎo)致頁(yè)面數(shù)據(jù)反饋?zhàn)兟?，?nuxt 的策略就可以優(yōu)化這個(gè)問(wèn)題，十分人性化。
vue的vuex的數(shù)據(jù)持久化
首先，什么是vuex？vuex就是一個(gè)集中式的狀態(tài)管理工具,在許多頁(yè)面需要共享同一個(gè)或者多個(gè)值/狀態(tài)的時(shí)候就會(huì)用到vuex, 但是,vuex不同于cookie和localStroage, 頁(yè)面刷新, state中的數(shù)據(jù)就會(huì)丟失。因此我們需要對(duì)vuex中的狀態(tài)做持久化的處理。
使用插件vuex-persistedstate對(duì)數(shù)據(jù)進(jìn)行數(shù)據(jù)的持久化處理
1.安裝
npm install vuex-persistedstate --save
在store下的index.js下引入
import createPersistedState from "vuex-persistedstate";
使用：
// 數(shù)據(jù)的持久化處理
? plugins: [
? ? createPersistedState({
? ? ? // 存儲(chǔ)方式：localStorage、sessionStorage、cookies
? ? ? storage: window.cookies,//存儲(chǔ)到cookie
? ? ? // storage:window.sessionStorage 存儲(chǔ)到sessionStorage
? ? ? // 如果不寫(xiě)默認(rèn)存儲(chǔ)到localStorage
? ? ? // 存儲(chǔ)的 key 的key值
? ? ? key: "store",
? ? ? render(state) {
? ? ? ? // 要存儲(chǔ)的數(shù)據(jù)：本項(xiàng)目采用es6擴(kuò)展運(yùn)算符的方式存儲(chǔ)了state中所有的數(shù)據(jù)
? ? ? ? return { ...state };
? ? ? ? //需要存儲(chǔ)其中的某些數(shù)據(jù)的話需要單獨(dú)取出來(lái)
? ? ? ?// return {
? ? ? ? ?? ?//只儲(chǔ)存state中的assessmentData
? ? ? ? ? ? //assessmentData: val.assessmentData
? ? ? //}
? ? })
? ]也可以使用多個(gè)插件
plugins要是一個(gè)一維數(shù)組不然會(huì)解析錯(cuò)誤
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
補(bǔ)充，實(shí)際開(kāi)發(fā)中，我們不會(huì)把所有的狀態(tài)都只放在一個(gè)state中，所以就有了modules
當(dāng)我們有多個(gè)vuex狀態(tài)的時(shí)候
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user.js' //這是專門(mén)管理user的
import admin from './admin.js' // 這是專門(mén)管理admin的
Vue.use(Vuex)
let storeRoot={
? state: {
?? ? ?
? },
? mutations: {
?? ??
? },
? actions: {
?? ? ?
? },
? modules: {
? ?? ?//在這里進(jìn)行引用
?? ? ?user,
?? ? ?admin
? }
}
export default new Vuex.Store(storeRoot) //導(dǎo)出admin文件
let admin={
?? ?namespaced: true,
?? ?state: {
?? ?},
?? ?mutations: {
?? ?},
?? ?actions: {
?? ??? ?}
?? ?}
}
export default admin以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-input框checkbox強(qiáng)制刷新問(wèn)題
這篇文章主要介紹了Vue-input框checkbox強(qiáng)制刷新問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
自己最近做項(xiàng)目的時(shí)候遇到需要下載文件的需求,索性這里給總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue中下載不同文件五種常用的方式,需要的朋友可以參考下2023-09-09
uniapp-ios開(kāi)發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見(jiàn)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開(kāi)發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)
這篇文章主要介紹了vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
在vue項(xiàng)目中我們常常需要用到computed和watch，那么我們究竟在什么場(chǎng)景下使用computed和watch呢？他們之間又有什么區(qū)別呢？本將給大家詳細(xì)的介紹一下,需要的朋友可以參考下2023-05-05
今天小編就為大家分享一篇vue移動(dòng)端彈框組件的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目報(bào)錯(cuò)Extra?semicolon?(semi)問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目報(bào)錯(cuò)Extra?semicolon?(semi)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
手寫(xiě)Vue彈窗Modal的實(shí)現(xiàn)代碼
這篇文章主要介紹了手寫(xiě)Vue彈窗Modal的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue3中provide和inject作用和場(chǎng)景
Vue3中provide和inject作用和場(chǎng)景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過(guò)實(shí)例介紹Vue3 provide和inject的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-11-11
vue前端獲取不同客戶端mac地址最詳細(xì)步驟(避免踩坑)
在開(kāi)發(fā)過(guò)程中,綁定賬號(hào)和電腦的功能可以通過(guò)獲取電腦的MAC地址實(shí)現(xiàn),下面這篇文章主要介紹了vue前端獲取不同客戶端mac地址的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10