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'])

  }

};

巴特西

Vue 数据持久化

最新文章

热门文章