Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)操作
一、安裝插件
yarn add vuex-persistedstate // 或 npm install --save vuex-persistedstate
二、使用方法
用sessionStorage緩存上面state的數(shù)據(jù),key名為store
import Vue from 'vue' import Vuex from 'vuex' // 引入插件 import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex) const state = {}; const mutations = {}; const actions = {}; const store = new Vuex.Store({ state, mutations, actions, /* vuex數(shù)據(jù)持久化配置 */ plugins: [ createPersistedState({ // 存儲(chǔ)方式:localStorage、sessionStorage、cookies 默認(rèn): localStorage storage: window.sessionStorage, // 存儲(chǔ)的 key 的key值 key: "store", render(state) { // 要存儲(chǔ)的數(shù)據(jù):本項(xiàng)目采用es6擴(kuò)展運(yùn)算符的方式存儲(chǔ)了state中所有的數(shù)據(jù) return { ...state }; } }) ] }); export default store;
三、緩存State下的部分?jǐn)?shù)據(jù)
import Vue from 'vue' import Vuex from 'vuex' // 引入插件 import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex) const state = () => { return { token: '', uid: '' } } const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage, reducer(val) { // val就是上面的state return { // 只儲(chǔ)存state中的token,而不會(huì)緩存uid token: val.token } } })] })
四、緩存Vuex多個(gè)模塊下的指定某個(gè)模塊的state,通過(guò)修改path配置來(lái)實(shí)現(xiàn)
/* user-module */ export const user = { state: { token: '', role: '' } } /* profile-module */ export const profile = { state: { name: '', company: '' } } /* modules目錄下的index.js */ import user from './user' import profile from './profile' export default { user, profile } /* store.js */ import modules from './modules' let store = new Vuex.Store({ modules, plugins: [ createPersistedState({ key: 'zdao', paths: ['user'] // 這里便只會(huì)緩存user下的state值 }) ] })
到此這篇關(guān)于Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)的文章就介紹到這了,更多相關(guān)vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于iview按需引用后使用this.$Modal報(bào)錯(cuò)的解決
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09在Nginx上部署前端Vue項(xiàng)目的詳細(xì)步驟(超級(jí)簡(jiǎn)單!)
這篇文章主要介紹了在Nginx上部署前端Vue項(xiàng)目的詳細(xì)步驟,Nginx是一款高效的HTTP和反向代理Web服務(wù)器,作為開源軟件,Nginx以其高性能、可擴(kuò)展性和靈活性廣泛應(yīng)用于Web架構(gòu)中,文中將步驟介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10nginx如何配置vue項(xiàng)目history的路由模式(非根目錄)
這篇文章主要介紹了nginx如何配置vue項(xiàng)目history的路由模式(非根目錄),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案
這篇文章主要介紹了vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06Vue3+TS項(xiàng)目中eslint、prettier安裝配置詳細(xì)指南
為了更好的統(tǒng)一項(xiàng)目的代碼風(fēng)格,因此在編寫時(shí)就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯(cuò)誤,讓代碼變得更加嚴(yán)謹(jǐn),這篇文章主要給大家介紹了關(guān)于Vue3+TS項(xiàng)目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下2024-07-07Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
我們?cè)陂_發(fā)vue的頁(yè)面的時(shí)候,有時(shí)候會(huì)遇到需要刷新當(dāng)前頁(yè)面功能,但是vue框架自帶的router是不支持刷新當(dāng)前頁(yè)面功能,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法,需要的朋友可以參考下2023-04-04element-ui中select組件綁定值改變,觸發(fā)change事件方法
今天小編就為大家分享一篇element-ui中select組件綁定值改變,觸發(fā)change事件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08