vuex 第三方包實現數據持久化的方法
更新時間：2021年09月14日 09:43:51 作者：賣小女孩的小火柴
本文主要介紹了vuex 第三方包實現數據持久化的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
目的：
讓在vuex中管理的狀態(tài)數據同時存儲在本地。可免去自己存儲的環(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是存儲數據的鍵名
- ===> paths是存儲state中的那些數據，如果是模塊下具體的數據需要加上模塊名稱，如user.token
- ===> 修改state后觸發(fā)才可以看到本地存儲數據的的變化。
總結：
- 基于第三方包實現vuex中的數據的持久化
- 觸發(fā)持久化的條件是state發(fā)生變化
到此這篇關于vuex 第三方包實現數據持久化的方法的文章就介紹到這了,更多相關vuex 數據持久化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue3中標簽form插件的使用的相關知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動態(tài)變化的值，子組件通過props獲取父組件傳過來的數據，子組件存在操作傳過來的數據并且傳遞給父組件,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue3.0中使用websocket,封裝到公共方法的實現，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue+axios 前端實現的常用攔截的代碼示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue如何實現清空this.$route.query的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue的watch和computed方法的使用及區(qū)別介紹
Vue的watch屬性可以用來監(jiān)聽data屬性中數據的變化。這篇文章主要介紹了Vue的watch和computed方法的使用及區(qū)別,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vuex的初探與實戰(zhàn)小結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關知識,插槽分為三種，分別是默認插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關于vue實現路由懶加載的3種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要介紹了vue基礎之模板和過濾器用法,結合實例形式分析了vue模板與過濾器的功能、使用方法及相關操作注意事項,需要的朋友可以參考下2019-03-03