vuex持久化

最新推荐文章于 2024-10-03 21:06:52 发布

m0_73323423

最新推荐文章于 2024-10-03 21:06:52 发布

阅读量45

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_73323423/article/details/131828974

版权

文章介绍了使用Vuex进行状态管理时，如何实现登录状态的持久化，包括使用vuex-persistedstate插件、vue-cookie以及监听pagehide事件结合sessionStorage来保存和恢复store的状态。

摘要由CSDN通过智能技术生成

方法1：

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

Vue.use(Vuex)

import loginModule from "./login.js"

//导入模块  要安装npm i vuex-persistedstate
import createPersistedstate  from 'vuex-persistedstate'


export default new Vuex.Store({
  state: {
    login:false
  },
  getters: {
  },
  mutations: {
    LOGIN(state,payload){
      state.login=payload
    }
  },
  actions: {
  },
  modules: {
    loginModule
  },
  plugins:[
    createPersistedstate({
      key:'user',// 存数据的key名，一个key存储全部state   自定义的  要有语义化
      storage:window.sessionStorage,//默认local 也可以存session
      // paths: ['loginModule'] // 要把那些模块加入缓存
      reducer(state){  //只存储全局的state
        return{
          a:state.login  
        }
      }
    }) 
  ]

})

方法2：

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

Vue.use(Vuex)

import loginModule from "./login.js"

//安装npm i vue-cookie(也可以用local)
var VueCookie = require('vue-cookie');


export default new Vuex.Store({
  state: {
    login: VueCookie.get('login')? VueCookie.get('login'):false
  },
  getters: {
  },
  mutations: {
    LOGIN(state,payload){
      state.login=payload
      VueCookie.set('login', payload, { expires: '300s' })
    }
  },
  actions: {
  },
  modules: {
    loginModule
  },

})

方法3：

利用 pagehide 事件在用户刷新页面时（或者beforeunload事件再页面刷新前）将vuex的store存入sessionstorage中，然后在页面加载时，从sessionstorage中获取，再利用replaceState写入store

  created() {
    // 在页面加载时读取sessionStorage里的状态信息
    let store = window.sessionStorage.getItem("store");
    if (store !== null) {
      this.$store.replaceState(
        Object.assign({}, this.$store.state, JSON.parse(store))
      );
    }
    // pagehide 解决ios移动端不支持beforeunload,安卓端两个都可以用
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('pagehide', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    });
  }