淄博阎囤工贸有限公司

Vue 數(shù)據(jù)持久化

2019-12-11    前端達(dá)人

方法一：使用 localStorage 存儲數(shù)據(jù)

window.localStorage.setItem(key，value)

 

方法二：使用 vuex-persistedstate插件

vuex 存在一個痛點，就是刷新以后vuex里面存儲的state就會被瀏覽器釋放掉（state都是存儲在內(nèi)存中的）。

辦法：

通過vuex-persistedstate插件，實現(xiàn)將數(shù)據(jù)存儲到本地。

1.實現(xiàn)

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    state:{},
    getters:{},
    actions:{},
    mutations:{},
    modules:{},
    plugins: [createPersistedState()]  //加上這個就可以了 //里面設(shè)置需要緩存的內(nèi)容
})

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

方法三： 使用vue-cookie插件

cookie 可以設(shè)置過期時間

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;
      // 設(shè)置存儲
      VueCookie.set('token', token, { expires: '30s' });
    }
  },
  actions: {

  }
})

日歷

鏈接

個人資料

存檔

民县| 潞城市| 井研县| 分宜县| 阳信县| 新宁县| 通城县| 二连浩特市| 介休市| 泾阳县| 馆陶县| 陕西省| 南宁市| 安图县| 双牌县| 黎城县| 普安县| 博乐市| 新巴尔虎右旗| 甘德县| 阿拉善右旗| 安乡县| 台湾省| 彩票| 西藏| 永仁县| 正安县| 德昌县| 南华县| 双桥区| 惠州市| 仪征市| 广平县| 昂仁县| 宁海县| 扶风县| 无锡市| 南丹县| 金沙县| 汉沽区| 铁力市|