vuex 第三方包實現數據持久化的方法
目的:
讓在vuex中管理的狀態數據同時存儲在本地。可免去自己存儲的環節。
- 在開發的過程中,像用戶信息(名字,頭像,token)需要vuex中存儲且需要本地存儲。
- 如果有別的模塊也需要持久化,也存儲在本地
1)首先:我們需要安裝一個vuex的插件vuex-persistedstate來支持vuex的狀態持久化。
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)繼續:在 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是存儲數據的鍵名
- ===> paths是存儲state中的那些數據,如果是模塊下具體的數據需要加上模塊名稱,如user.token
- ===> 修改state後觸發才可以看到本地存儲數據的的變化。
總結:
- 基於第三方包實現vuex中的數據的持久化
- 觸發持久化的條件是state發生變化
到此這篇關於vuex 第三方包實現數據持久化的方法的文章就介紹到這瞭,更多相關vuex 數據持久化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!