Vue 數據持久化

方法一：使用 localStorage 存儲數據

window.localStorage.setItem(key，value)

 

方法二：使用 vuex-persistedstate插件

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

辦法：

通過vuex-persistedstate插件，實現將數據存儲到本地。

1.實現

npm install vuex-persistedstate  --save

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

 

 2. 舉個例子：如果你不小心關掉了一個標簽，他們可以重新打開並回到之前頁面的狀態。

 

自定義存儲

如果在本地存儲中存儲Vuex存儲的狀態並不理想。人們可以輕松地實現功能使用cookie

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

// 用sessionStorage替換localStorage
// createPersistedState({ storage: window.sessionStorage })

 

方法三： 使用vue-cookie插件

cookie 可以設置過期時間

1.安裝

npm install vue-cookie --save

2.在 store中存儲起來

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: {

  }
})

3.在登錄頁面 設置存儲起來

import { mapMutations } from 'vuex';
export default {
  methods: {
    login() {
      this.saveToken('123')
    },
    ...mapMutations(['saveToken'])
  }
};