vue實(shí)際運(yùn)用之vuex持久化詳解
更新時(shí)間：2021年12月23日 11:08:15 作者：GG·bond
這篇文章主要為大家介紹了vue運(yùn)用之vuex持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
vuex持久化
vuex：刷新瀏覽器，vuex中的state會(huì)重新變?yōu)槌跏紶顟B(tài)
解決辦法：
使用vuex-persistedstate插件 （實(shí)際就是自動(dòng)存在本地存儲(chǔ)中）
- 安裝
npm i -S vuex-persistedstate - 引入及配置：在store下的index.js中
import Vue from 'vue'
import Vuex from 'vuex'
//引入
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: null,
name: null
},
mutations: {
getNum(state, val) {
state.num = val
},
getName(state, val) {
state.name = val
}
},
//配置
plugins: [
persistedState({
//默認(rèn)使用localStorage來固化數(shù)據(jù)，也可使用sessionStorage，配置一樣
storage: window.localStorage,
reducer(val) {
return {
// 只儲(chǔ)存state中的值
num: val.num,
name: val.name
}
}
})
]
})
我在Home組件中給vuex中的state中變量賦值
created(){
this.$store.commit('getNum',3)
this.$store.commit('getName','胡歌')
},
在H組件中引用
<template>
<div>
{{$store.state.num}}
{{$store.state.name}}
</div>
</template>
這樣刷新H組件，$store.state中的變量不會(huì)變，其實(shí)就是自動(dòng)存在本地存儲(chǔ)中
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
在開發(fā)中經(jīng)常有從列表跳到詳情頁，然后返回詳情頁的時(shí)候需要緩存列表頁的狀態(tài)（比如滾動(dòng)位置信息），這個(gè)時(shí)候就需要保存狀態(tài)，要緩存狀態(tài)2021-10-10
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3中vue.config.js配置Element-plus組件和Icon圖標(biāo)實(shí)現(xiàn)按需自動(dòng)引入實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置Element-plus組件和Icon圖標(biāo)實(shí)現(xiàn)按需自動(dòng)引入的相關(guān)資料,在Vue 3中可以通過配置vue.config.js文件來進(jìn)行按需自動(dòng)引入,需要的朋友可以參考下2024-02-02
這篇文章主要來和大家深入討論一下在Vue開發(fā)中是否有必要一定用watch,如果換成watcheffect會(huì)如何,文中的示例代碼講解詳細(xì),需要的可以參考下2023-12-12
這篇文章主要介紹了react和vue的事件處理差異,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在vue項(xiàng)目開發(fā)中,我們會(huì)將經(jīng)常用到的邏輯或模塊抽象成組件,對(duì)于那些多個(gè)項(xiàng)目都有用到的組件,可以考慮封裝成組件庫,這篇文章主要給大家介紹了關(guān)于webpack如何打包一個(gè)按需引入的vue組件庫的相關(guān)資料,需要的朋友可以參考下2022-02-02
vue里面v-bind和Props 利用props綁定動(dòng)態(tài)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue里面v-bind和Props 利用props綁定動(dòng)態(tài)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue項(xiàng)目中添加單元測試的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue使用mint-ui實(shí)現(xiàn)下拉刷新和無限滾動(dòng)的示例代碼
本篇文章主要介紹了vue使用mint-ui實(shí)現(xiàn)下拉刷新和無限滾動(dòng)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11