點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

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

Vuex localStorage數據狀态持久化

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

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

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

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

store插件介紹

這裡我們用了一個名叫store的插件，當然不用也是可以的，不過都得自己來寫set、get略微麻煩一寫。 store的插件就是把Storage的set、get等封裝，使用起來更方便。

自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文件示例

Vuex localStorage數據狀态持久化

新建一個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.setLocalStorageName || '' }, mutations: { setData (state, data) { // 拿到數據有，向state和storage裡面都放入數據 state.name = data storage.setLocalStorageName = data; } }, actions: { getData ({ commit, state }, params) { let name = 'web秀 Vuex localStorage數據狀态持久化'; commit('name', name) } }) export default store

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

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

Vuex localStorage數據狀态持久化

1、購物車 比如你把商品加入購物車後，沒有保存到後台的情況下，前端來存，就可以通過這種方式。

2、會話狀态 授權登錄後，token就可以用Vuex sessionStorage來存儲。

3、一些不會經常改變的數據 比如城市列表等（當前也要留下可以更新的入口，比如版本号）

總結

Vuex數據持久化是不是很簡單了？确實是不費多大勁就可以搞定了。多自己動手實踐一下，可以更快的掌握哦。

上面說的不用store的插件也是可以的，怎麼解決了？隻需要将store.js文件裡面用到storage的地方換成對應的get、set即可。

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

公告

為了感謝大家一直以來的支持，小編發起了抽獎活動，大家可以去參與，轉發抽獎活動和關注小編即可參與，抽出5名小夥伴每人20元話費獎勵。再次感謝大家的支持。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部