vuex的数据持久化

本文介绍一种不使用插件实现vuex数据持久化的方法

在实现用户登录的时候，后端会返回给我们一个token值进行验证，然后允许用户进入系统

token值一般会放在vuex之中方便使用，但vuex只是一种状态，当你刷新页面的时候vuex里面的数据就会丢失，而我们是一直需要这个token值来保证用户的登陆状态，这个时候我们就需要考虑vuex的数据持久化来保证即使用户刷新页面，vuex里面的数据也不会丢失。下面进行详细的代码介绍

大致思路：将数据存放vuex中，在vuex的mutations模块将数据存放进sessionStorage里，再入口文件main.js文件中将之前存入sessionStorage中的token再存进vuex中，以此实现vuex数据的持久化

//login.vue页面
export default {
methods:{
   async submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
           let data = await getLoginData(param)//获取到含有token的data数据
           this.$store.commit("loginFn",data.token)//将token存放到vuex之中
           if(data.code == 1) {
           this.$router.push('/main')
             }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
}}

//封装一个将数据存放在sessionStorge之中的方法    loginvalidata.js
export const setStore = data => sessionStorage.setItem('login',data)
export const getStore = () => sessionStorage.getItem('login')


//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import { setStore,getStore } from '../util/loginValidate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token:''
  },
  mutations: {
  loginFn(state,data){
      state.token = data
      setStore(state.token)//在这里将token存进sessionStorage之中
    }
  },
  actions: {
  },
  modules: {
  }
})


//main.js  入口文件
// vuex的数据持久化
//页面刷新的时候将sessionStorage存放的token数据拿出来再存到vuex之中
if(getStore('login') != '') {
  store.commit("loginFn",getStore('login'))
}


//main.vue
export default {
  mounted() {
    this.vaidilate();
  },
  methods: {
    vaidilate() {
      if (this.$store.state.token == "") {//判断token是否存在，如果不存在则跳转回登陆界面
        this.$router.push("/");
      } else {
      }
    },
  },
};

这里的代码是我简化之后的代码，若有不足之处清谅解指正，谢谢

另外就是网上也有关于vuex数据持久化的插件，比如vuex-persistedstate就是一款比较好用的插件，若有人觉得麻烦也可以使用插件实现数据持久化

ps：若实现退出登录则将存在sessionStorage之中的token删除