element ui框架（vuex3使用）

前面我们使用了sessionStorage实现了登陆状态的保存。但是sessionStorage保存的数据是有限的，如果希望实现vue不同组件之间的数据共享，可以使用vuex来实现。目前和vue2比较match的vuex是vuex3，这一点需要注意下。

1、安装vuex3

npm install vuex@3 --save-dev

2、在main.js中添加vuex

import Vuex from 'vuex'
Vue.use(Vuex)

3、创建一个store目录，准备index.js文件

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

Vue.use(Vuex)

const state = {
  user:{
    name:''
  }
};

const getters = {
  getUser(state) {
    return state.user;
  }
};

const mutations = {
  updateUser(state,user){
    state.user = user;
  }
};

const actions = {
  asyncUpdateUser(context, user){
    context.commit("updateUser", user);
  }
};

export default new Vuex.Store({
  state, 
  getters, 
  mutations,
  actions 
})

4、在main.js中加入刚刚创建的store对象

import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  render:h=>h(App)
})

5、在submitForm中增加代码

this.$store.dispatch("asyncUpdateUser", {name:this.form.name});

6、在Main.vue中修改span中的显示方法

<span>{{$store.getters.getUser.name}}</span>

7、测试验证

在没有添加vuex之前，登录到Main页面之后。如果继续点击/MemberLevel，或者是/MemberList，就会出现用户丢失的情况。现在有了vuex，这种现象不会出现了。

8、继续解决页面刷新后，用户信息丢失的问题

要解决这个问题，需要有两个地方做出修改，一个是在Main.vue中添加页面刷新回调，保证页面刷新前数据保存到sessionStorage；另外一个就是store的index.js做出修改，主要是state的初始化。

8.1 Main.vue添加回调函数

export default {
  name: "Main",
  mounted() {
    window.addEventListener('unload', this.saveState())
  },
  methods: {
    saveState() {
      console.log(JSON.stringify(this.$store.state));
      sessionStorage.setItem('state', JSON.stringify(this.$store.state));
  }
  }
}

8.2 修改store/index.js中state的初始化函数

const state = sessionStorage.getItem('state')?JSON.parse(sessionStorage.getItem('state')):{
  user:{
    name:''
  }
};

有了8.1和8.2这两部分，基本就可以解决页面F5刷新后，用户信息丢失的问题。

9、针对前一篇登录状态保留中的作弊问题，因为有了store数据，这里其实也可以一并修改了，

router.beforeEach((to,from,next)=>{
  let isLogin = sessionStorage.getItem('isLogin')

  if(to.path=='/Logout'){
    sessionStorage.clear()
    next({path:"/Login"})
  }
  else if(to.path == '/Login') {
    if(isLogin != null) {
      next({path:('/Main/'+store.getters.getUser.name)})  // 修改一处
    }
  }
  else if(to.path == '/') {
    if(isLogin != null) {
      next({path:('/Main/'+store.getters.getUser.name)}) // 修改二处
    }
    else{
      next({path:'/Login'})
    }
  }
  else if(isLogin == null){
    next({path:'/Login'})
  }

  next();
})

秒客网

element ui框架（vuex3使用）

相关文章