vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法
更新時(shí)間：2021年09月14日 09:43:51 作者：賣小女孩的小火柴
本文主要介紹了vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
目的：
讓在vuex中管理的狀態(tài)數(shù)據(jù)同時(shí)存儲(chǔ)在本地?？擅馊プ约捍鎯?chǔ)的環(huán)節(jié)。
- 在開發(fā)的過程中，像用戶信息（名字，頭像，token）需要vuex中存儲(chǔ)且需要本地存儲(chǔ)。
- 如果有別的模塊也需要持久化，也存儲(chǔ)在本地
1）首先：我們需要安裝一個(gè)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就是用戶信息對(duì)象
setUser (state, payload) {
state.profile = payload
}
}
}
3）繼續(xù)：在 src/store/index.js 中導(dǎo)入 user 模塊。
import { createStore } from 'vuex'
import user from './modules/user'
export default createStore({
modules: {
user
}
})
4）最后：使用 vuex-persistedstate 插件來進(jìn)行持久化
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']
+ })
+ ]
})
注意：
- ===> 默認(rèn)是存儲(chǔ)在localStorage中
- ===> key是存儲(chǔ)數(shù)據(jù)的鍵名
- ===> paths是存儲(chǔ)state中的那些數(shù)據(jù)，如果是模塊下具體的數(shù)據(jù)需要加上模塊名稱，如user.token
- ===> 修改state后觸發(fā)才可以看到本地存儲(chǔ)數(shù)據(jù)的的變化。
總結(jié)：
- 基于第三方包實(shí)現(xiàn)vuex中的數(shù)據(jù)的持久化
- 觸發(fā)持久化的條件是state發(fā)生變化
到此這篇關(guān)于vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法的文章就介紹到這了,更多相關(guān)vuex 數(shù)據(jù)持久化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue3中標(biāo)簽form插件的使用的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2024-01-01
詳解VUE里子組件如何獲取父組件動(dòng)態(tài)變化的值
這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動(dòng)態(tài)變化的值，子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下2018-12-12
vue3.0中使用websocket,封裝到公共方法的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0中使用websocket,封裝到公共方法的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue如何實(shí)現(xiàn)清空this.$route.query的值
這篇文章主要介紹了vue如何實(shí)現(xiàn)清空this.$route.query的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue的watch和computed方法的使用及區(qū)別介紹
Vue的watch屬性可以用來監(jiān)聽data屬性中數(shù)據(jù)的變化。這篇文章主要介紹了Vue的watch和computed方法的使用及區(qū)別,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vuex的初探與實(shí)戰(zhàn)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關(guān)知識(shí),插槽分為三種，分別是默認(rèn)插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)路由懶加載的3種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了vue基礎(chǔ)之模板和過濾器用法,結(jié)合實(shí)例形式分析了vue模板與過濾器的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03