Vuex數據持久化實現的思路與代碼
什麼是vuex
vuex :是一個專為vue.js開發的狀態管理器,采用集中式存儲的所有組件狀態
五個屬性: state、getters、mutations、actions、module
基本使用:
新建store.js文件,最後在main.js中引入,並掛載到實列上
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} const mutations = {} const actions = {} export default new Vuex.Store({ state, getters, mutations, actions })
state屬性: 存放狀態,例如你要存放的數據
getters: 類似於共享屬性,可以通過this.$store.getters來獲取存放在state裡面的數據
mutations: 唯一能改變state的狀態就是通過提交mutations來改變,this.$store.commit()
actions: 一步的mutations,可以通過dispatch來分發從而改變state
Vuex 數據持久化
眾所周知,Vuex 的數據是存儲在內存中的,刷新一下網頁這些數據就會丟失。而有些數據我們希望刷新後仍然能夠留存,這就需要把數據存儲下來。這裡就記錄一下,使用 localStorage 來持久化 Vuex 中的數據。
實現思路
- 因為 state 中的數據理論上隻能通過 mutation 來進行更新,所以可以監聽 mutation 事件,在每次事件執行後,將此時整個 state 的數據轉為字符串後存儲進 localStorage。
- 在頁面初始化 state 時,讀取 localStorage 值,重新轉為 JSON 後,合並進當前 state。
- 這種方法隻是一個簡單的實現,隻適用於簡單對象,對復雜對象來說,重新轉為 JSON 可能會失去對應的事件和方法,後面可以考慮以其他方式存儲。
代碼
插件:
export default (options = {}) => { const storage = options.storage || (window && window.localStorage); const key = options.key || "vuex"; // 獲取state的值 const getState = (key, storage) => { const value = storage.getItem(key); try { return typeof value !== "undefined" ? JSON.parse(value) : undefined; } catch (err) { console.warn(err); } return undefined; }; // 設置state的值 const setState = (key, state, storage) => storage.setItem(key, JSON.stringify(state)); return (store) => { // 初始化時獲取數據,如果有的話,把原來的vuex的state替換掉 const data = Object.assign(store.state, getState(key, storage)); if (data) { store.replaceState(data); } // 訂閱 store 的 mutation。handler 會在每個 mutation 完成後調用,接收 mutation 和經過 mutation 後的狀態作為參數 store.subscribe((mutation, state) => { setState(key, state, storage); }); }; };
調用方式:
import VuexPersist from "@/plugins/VuexPersist"; export default createStore({ plugins: [VuexPersist()], });
總結
到此這篇關於Vuex數據持久化實現的文章就介紹到這瞭,更多相關Vuex數據持久化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!