美文网首页
Vuex+localStorage数据状态持久化

Vuex+localStorage数据状态持久化

作者: web秀 | 来源:发表于2019-06-18 15:21 被阅读0次

    前言

    在前面文章中,我们详细的讲述了Vuex相关的知识,没有了解的小伙伴可以先去了解一波:
    《Vuex是什么?Vuex能做什么?Vuex怎么使用?》

    Vuex+localStorage数据状态持久化

    这篇文章主要是讲讲如何使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文件示例

    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.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数据状态持久化的使用场景

    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)转回对象。

    原文地址:Vuex+localStorage数据状态持久化

    相关文章

      网友评论

          本文标题:Vuex+localStorage数据状态持久化

          本文链接:https://www.haomeiwen.com/subject/ovpfqctx.html