您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vuex第三方包怎么實現(xiàn)數(shù)據(jù)持久化”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“vuex第三方包怎么實現(xiàn)數(shù)據(jù)持久化”吧!
讓在vuex中管理的狀態(tài)數(shù)據(jù)同時存儲在本地??擅馊プ约捍鎯Φ沫h(huán)節(jié)。
在開發(fā)的過程中,像用戶信息(名字,頭像,token)需要vuex中存儲且需要本地存儲。
如果有別的模塊也需要持久化,也存儲在本地
1)首先:我們需要安裝一個vuex的插件vuex-persistedstate來支持vuex的狀態(tài)持久化。
npm i vuex-persistedstate
2)然后:在src/store 文件夾下新建 modules 文件,在 modules 下新建 user.js 和 cart.js
src/store/modules/user.js
// 用戶模塊 export default { namespaced: true, state () { return { // 用戶信息 profile: { id: '', avatar: '', nickname: '', account: '', mobile: '', token: '' } } }, mutations: { // 修改用戶信息,payload就是用戶信息對象 setUser (state, payload) { state.profile = payload } } }
3)繼續(xù):在 src/store/index.js 中導入 user 模塊。
import { createStore } from 'vuex' import user from './modules/user' export default createStore({ modules: { user } })
4)最后:使用 vuex-persistedstate 插件來進行持久化
import { createStore } from 'vuex' +import createPersistedstate from 'vuex-persistedstate' import user from './modules/user' export default createStore({ modules: { user }, + plugins: [ + createPersistedstate({ + key: 'erabbit-client-pc-store', + paths: ['user'] + }) + ] })
注意:
===> 默認是存儲在localStorage中
===> key是存儲數(shù)據(jù)的鍵名
===> paths是存儲state中的那些數(shù)據(jù),如果是模塊下具體的數(shù)據(jù)需要加上模塊名稱,如user.token
===> 修改state后觸發(fā)才可以看到本地存儲數(shù)據(jù)的的變化。
基于第三方包實現(xiàn)vuex中的數(shù)據(jù)的持久化
觸發(fā)持久化的條件是state發(fā)生變化
到此,相信大家對“vuex第三方包怎么實現(xiàn)數(shù)據(jù)持久化”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。