vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明
vuex狀態(tài)持久化在vue和nuxt.js的區(qū)別
Vue
相信很多人對 vue 中的 vuex 狀態(tài)持久化已經(jīng)很熟悉了，使用 vuex-persistedstate 或者 vuex-persist 即可。
這里推薦使用前者，因為 vuex-persist 基于 ts ，webpack 未經(jīng)配置打包 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)
? ? ? }
? ? })
? ]
})Nuxt
因為每次請求都自帶 cookies ，所以可以在第一次進(jìn)入頁面的 nuxt 服務(wù)端初始化方法 nuxtServerInit 中將 cookies 存到 vuex 狀態(tài)樹中。
由于是服務(wù)端獲取 cookies ，js-cookie 不再適用，需要使用 cookie-universal-nuxt ：
npm install cookie-universal-nuxt
之后在 store/index.js 中：
// 定義行為
const actions = {
? ? // nuxt提供的，每次發(fā)送請求都會先調(diào)用此方法 ，并且第1個參數(shù)store, 該方法的第2個參數(shù)是context
? ? nuxtServerInit({commit}, {app}) {
? ? ? ? const data = {}
? ? ? ? data.accessToken = app.$cookies.get('accessToken')
? ? ? ? // 更新 vuex 狀態(tài)樹
? ? ? ? commit('UPDATE_ALL_STATE', data)
? ? }
?}這里的 app.$cookies.get 是 cookie-universal-nuxt 給我們提供的在服務(wù)端獲取 cookies 的方法。
他等價于使用 context 中的 req 對象獲取 cookie ：req.headers.cookie 之后解析出我們需要的對象值。
那問題來了，既然都有原生 vuex 狀態(tài)持久化方法了為什么還要用 nuxt 的方法，因為在 created 的時候 window 對象不能使用（包括 cookie 和 loaclStorage），只能在 mounted 使用，于是在頁面加載的一瞬間不能加載狀態(tài)樹，導(dǎo)致頁面數(shù)據(jù)反饋變慢，而 nuxt 的策略就可以優(yōu)化這個問題，十分人性化。
vue的vuex的數(shù)據(jù)持久化
首先，什么是vuex？vuex就是一個集中式的狀態(tài)管理工具,在許多頁面需要共享同一個或者多個值/狀態(tài)的時候就會用到vuex, 但是,vuex不同于cookie和localStroage, 頁面刷新, state中的數(shù)據(jù)就會丟失。因此我們需要對vuex中的狀態(tài)做持久化的處理。
使用插件vuex-persistedstate對數(shù)據(jù)進(jìn)行數(shù)據(jù)的持久化處理
1.安裝
npm install vuex-persistedstate --save
在store下的index.js下引入
import createPersistedState from "vuex-persistedstate";
使用：
// 數(shù)據(jù)的持久化處理
? plugins: [
? ? createPersistedState({
? ? ? // 存儲方式：localStorage、sessionStorage、cookies
? ? ? storage: window.cookies,//存儲到cookie
? ? ? // storage:window.sessionStorage 存儲到sessionStorage
? ? ? // 如果不寫默認(rèn)存儲到localStorage
? ? ? // 存儲的 key 的key值
? ? ? key: "store",
? ? ? render(state) {
? ? ? ? // 要存儲的數(shù)據(jù)：本項目采用es6擴(kuò)展運(yùn)算符的方式存儲了state中所有的數(shù)據(jù)
? ? ? ? return { ...state };
? ? ? ? //需要存儲其中的某些數(shù)據(jù)的話需要單獨(dú)取出來
? ? ? ?// return {
? ? ? ? ?? ?//只儲存state中的assessmentData
? ? ? ? ? ? //assessmentData: val.assessmentData
? ? ? //}
? ? })
? ]也可以使用多個插件
plugins要是一個一維數(shù)組不然會解析錯誤
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
補(bǔ)充，實際開發(fā)中，我們不會把所有的狀態(tài)都只放在一個state中，所以就有了modules
當(dāng)我們有多個vuex狀態(tài)的時候
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: {
? ?? ?//在這里進(jìn)行引用
?? ? ?user,
?? ? ?admin
? }
}
export default new Vuex.Store(storeRoot) //導(dǎo)出admin文件
let admin={
?? ?namespaced: true,
?? ?state: {
?? ?},
?? ?mutations: {
?? ?},
?? ?actions: {
?? ??? ?}
?? ?}
}
export default admin以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE跳轉(zhuǎn)外部鏈接與網(wǎng)頁的方法示例
這篇文章主要給大家介紹了關(guān)于VUE跳轉(zhuǎn)外部鏈接與網(wǎng)頁的方法,記錄一下在vue項目中如何實現(xiàn)跳轉(zhuǎn)到一個新頁面,需要的朋友可以參考下2023-06-06
關(guān)于Vue中img動態(tài)拼接src圖片地址的問題
這篇文章主要介紹了關(guān)于Vue中img動態(tài)拼接src圖片地址的問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue+swiper實現(xiàn)側(cè)滑菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
Vue中對比scoped css和css module的區(qū)別
這篇文章主要介紹了Vue中scoped css和css module的區(qū)別對比，scoped css可以直接在能跑起來的vue項目中使用而css module需要增加css-loader配置才能生效。具體內(nèi)容詳情大家參考下本文2018-05-05
這篇文章主要為大家介紹了如何利用Vue實現(xiàn)一個樹形穿梭框，elementUI和ant-d組件庫的穿梭框組件效果都不是很好，所以本文將利用一個新的插件來實現(xiàn)，需要的可以參考一下2022-04-04
這篇文章主要介紹了vue如何實現(xiàn)上傳圖片和顯示圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在vue.js項目中使用vue-router，可以使用路由進(jìn)行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
Vue 中使用虛擬 dom 且根據(jù) diff 算法進(jìn)行新舊 DOM 對比，從而更新真實 dom ，key 是虛擬 DOM 對象的唯一標(biāo)識, 在 diff 算法中 key 起著極其重要的作用，本文講解 key 的作用以及為什么最好不要使用 index 作為 key 的屬性值2021-11-11