Vuex+localStorage數據狀態持久化

前言

在前面文章中，咱們詳細的講述了Vuex相關的知識，沒有了解的小夥伴能夠先去了解一波: 《Vuex是什麼？Vuex能作什麼？Vuex怎麼使用？》

這篇文章主要是講講如何使Vuex數據持久化？

顧名思義，瀏覽器想要數據持久化，必須用到localStorage或者sessionStorage，可能還有不知道這兩個東西是幹什麼的小夥伴，簡單的說一下：

localStorage和sessionStorage均可以將數據保存到瀏覽器上。localStorage不會過時，除非清除或者大小超出，sessionStorage一旦瀏覽器關閉就會被清除。

Vuex 和 localStorage或者sessionStorage如何結合到一塊兒了？？？

store插件介紹

這裏咱們用了一個名叫store的插件，固然不用也是能夠的，不過都得本身來寫set、get略微麻煩一寫。 store的插件就是把Storage的set、get等封裝，使用起來更方便。

store2

自2.x以來，功能也是愈來愈強大

// === store(key, data);
store.set(key, data[, overwrite]); 
// === store({key: data, key2: data});
store.setAll(data[, overwrite]);
// === store(key); 
store.get(key[, alt]);    
// === store(); 
store.getAll([fillObj]); 
// === store(key, fn[, alt]); 
store.transact(key, fn[, alt]);    
// === store(false);
store.clear();     
// returns true or false 
store.has(key);   
// removes key and its data, then returns the data 
store.remove(key);      
// fn receives key and data (or fill), return false to exit early 
store.each(fn[, fill]);     
// concats, merges, or adds new value into existing one 
store.add(key, data);
// returns array of keys 
store.keys([fillList]);
// number of keys, not length of data 
store.size();
// clears *ALL* areas (but still namespace sensitive) 
store.clearAll();
複製代碼

下面來看看具體使用示例

storage文件示例

新建一個storage.js文件

import storage from 'store';

// 緩存數據的key
const WEB_NAME = 'WEB_NAME'; 

export const storage = {
  set setLocalStorageName(val) {
    if (!val) {
      storage.remove(WEB_NAME);
    } else {
      storage.set(WEB_NAME, val);
    }
  },
  get getLocalStorageName() {
    return storage.get(WEB_NAME);
  }
}
複製代碼

store文件示例

新建一個store.js文件，同時引入上面的storage.js文件

import Vue from 'vue'
import Vuex from 'vuex'

import { storage } from './storage';

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 默認讀取storage裏面的數據
    name: storage.getLocalStorageName || ''
  },
  mutations: {
    setData (state, data) {
      // 拿到數據有，向state和storage裏面都放入數據
      state.name = data
      storage.setLocalStorageName = data;
    }
  },
  actions: {
    getData ({ commit, state }, params) {
      let name = 'web秀 Vuex+localStorage數據狀態持久化';
      commit('setData', name)
    }
})

export default store

複製代碼

這樣在使用Vuex state的時候，強制刷新頁面等操做都不會清除name值，只有手動清除火車set 空值進去才能夠清除name了。

Vuex數據狀態持久化的使用場景

一、購物車 好比你把商品加入購物車後，沒有保存到後臺的狀況下，前端來存，就能夠經過這種方式。

二、會話狀態 受權登陸後，token就能夠用Vuex+sessionStorage來存儲。

三、一些不會常常改變的數據 好比城市列表等（當前也要留下能夠更新的入口，好比版本號）

總結

Vuex數據持久化是否是很簡單了？確實是不費多大勁就能夠搞定了。多本身動手實踐一下，能夠更快的掌握哦。

上面說的不用store的插件也是能夠的，怎麼解決了？只須要將store.js文件裏面用到storage的地方換成對應的get、set便可。

小提示：localStorage.setItem(key, String), set的值必須是字符串，若是你的數據是對象都須要先行轉換（JSON.stringify(xxx)）,取出時localStorage.getItem(key)，若是不是字符串，取出後能夠經過JSON.parse(xxx)轉回對象。

原文地址：Vuex+localStorage數據狀態持久化