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)文章

Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程，這種導(dǎo)航效果廣泛應(yīng)用于商城點(diǎn)餐購物情景，文中通過示例代碼介紹的很詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-05-05
element跨分頁操作選擇詳解
這篇文章主要為大家詳細(xì)介紹了element跨分頁操作選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
Vue 組件化基本使用詳情
這篇文章主要給大家分享的是Vue 組件化基本使用，所謂組件化，就是把頁面拆分成多個(gè)組件，每個(gè)組件依賴的 CSS、JS、模板、圖片等資源放在一起開發(fā)和維護(hù)。因?yàn)榻M件是資源獨(dú)立的，所以組件在系統(tǒng)內(nèi)部可復(fù)用，組件和組件之間可以嵌套，下面來看文章學(xué)習(xí)內(nèi)容吧
2021-10-10
使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問題
這篇文章主要介紹了使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本
這篇文章主要介紹了Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本的跨域請求封裝問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-10-10
Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子
今天小編就為大家分享一篇Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue-cli3.0 特性解讀
這篇文章主要介紹了vue-cli3.0 特性解讀,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
vue.js實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)選項(xiàng)卡切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
淺談Vue項(xiàng)目骨架屏注入實(shí)踐
這篇文章主要介紹了淺談Vue項(xiàng)目骨架屏注入實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決
這篇文章主要介紹了vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07