Vue 数据持久化

2019-12-11    前端达人

方法一：使用 localStorage 存储数据

window.localStorage.setItem(key，value)

 

方法二：使用 vuex-persistedstate插件

vuex 存在一个痛点，就是刷新以后vuex里面存储的state就会被浏览器释放掉（state都是存储在内存中的）。

办法：

通过vuex-persistedstate插件，实现将数据存储到本地。

1.实现

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    state:{},
    getters:{},
    actions:{},
    mutations:{},
    modules:{},
    plugins: [createPersistedState()]  //加上这个就可以了 //里面设置需要缓存的内容
})

API：  https://www.npmjs.com/package/vuex-persistedstate

方法三： 使用vue-cookie插件

cookie 可以设置过期时间

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

Vue.use(Vuex)
var VueCookie = require('vue-cookie');

export default new Vuex.Store({
  state: {
    token: VueCookie.get('token')
  },
  mutations: {
    saveToken(state, token) {
      state.token = token;
      // 设置存储
      VueCookie.set('token', token, { expires: '30s' });
    }
  },
  actions: {

  }
})

分享本文至：
« HTML 知识点总结 简单有效的JavaScript图片预加载效果 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档