vue實際運用之vuex持久化詳解
vuex持久化
vuex:刷新瀏覽器,vuex中的state會重新變為初始狀態
解決辦法:
使用vuex-persistedstate插件 (實際就是自動存在本地存儲中)
- 安裝
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({ //默認使用localStorage來固化數據,也可使用sessionStorage,配置一樣 storage: window.localStorage, reducer(val) { return { // 隻儲存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中的變量不會變,其實就是自動存在本地存儲中
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- vuex數據持久化的兩種實現方案
- vuex 第三方包實現數據持久化的方法
- Vue保持用戶登錄狀態(各種token存儲方式)
- Vuex數據持久化實現的思路與代碼
- vuex結合session存儲數據解決頁面刷新數據丟失問題