vuex數據持久化的實現方法有哪些

本篇內容介紹了“vuex數據持久化的實現方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

目錄

• 業務需求：
  

• 方案一：vuex-persistedstate

• 方案二：vuex-persist

• 總結
  

業務需求：

在基于vue開發SPA項目時，為了解決頁面刷新后數據丟失的問題，我們一般都是將數據存儲在localstorage或sessionstorage中；當數據需要全局處理統一管理時，我們也會借助于vue官方提供的vuex來進行數據的統一管理。vuex相比localstorage或sessionstorage來說，存儲數據更安全些。與此同時，vuex也存在一些弊端，當頁面刷新后，vuex中state存儲的數據同時也會被更新，vuex中存儲的數據不能持久化，需要監聽處理來維持vuex存儲的數據狀態持久化。

為解決頁面刷新后vuex中存儲的數據狀態不能持久化的問題，我采取的方案是借助第三方插件工具來實現vuex數據的持久化存儲，來解決頁面刷新后數據更新的問題。

方案一：vuex-persistedstate

安裝插件

yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate

使用方法

import Vuex from "vuex";
// 引入插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const state = {};
const mutations = {};
const actions = {};

const store = new Vuex.Store({
	state,
	mutations,
	actions,
  /* vuex數據持久化配置 */
	plugins: [
		createPersistedState({
      // 存儲方式：localStorage、sessionStorage、cookies
			storage: window.sessionStorage,
      // 存儲的 key 的key值
			key: "store",
			render(state) {
        // 要存儲的數據：本項目采用es6擴展運算符的方式存儲了state中所有的數據
				return { ...state };
			}
		})
	]
});

export default store;

vuex中module數據的持久化存儲

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}
 
/* store.js */
import { dataStore } from './module'
 
const dataState = createPersistedState({
  paths: ['data']
});
 
export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
});

注意事項：

1. storage為存儲方式，可選值為localStorage、sessionStorage和cookies；

2. localStorage和sessionStorage兩種存儲方式可以采用上述代碼中的寫法，若想采用cookies坐位數據存儲方式，則需要另外一種寫法；

3. render接收一個函數，返回值為一個對象；返回的對象中的鍵值對既是要持久化存儲的數據；

4. 若想持久化存儲部分數據，請在return的對象中采用key：value鍵值對的方式進行數據存儲，render函數中的參數既為state對象。

方案二：vuex-persist

安裝插件

yarn add vuex-persist
// 或
npm install --save vuex-persist

使用方法

import Vuex from "vuex";
// 引入插件
import VuexPersistence from "vuex-persist";

Vue.use(Vuex);
//  初始化
const state = {
	userName:'admin'
};
const mutations = {};
const actions = {};
// 創建實例
const vuexPersisted = new VuexPersistence({
	storage: window.sessionStorage,
  render:state=>({
  	userName:state.userName
    // 或
    ...state
  })
});

const store = new Vuex.Store({
	state,
  actions,
  mutations,
  // 數據持久化設置
  plugins:[vuexPersisted.plugins]
});

export default store;

屬性方法

總結

上述兩種方案都可以實現vuex數據持久化存儲。方案一是我在實際開發過程中用到的，方案二是在Github上看到的，綜合來說，兩者都可以時間最終的需求，而且都有對應的案例Demo可以參考。相比來說方案一在GitHub上的start數要高于方案二。

請結合實際情況選擇符合自己的方案！

“vuex數據持久化的實現方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！