在登陆退出时候使用Vuex

1.登陆的时候，在登陆模块请求接口，然后获取一个access_token，获取用户权限.保存到缓存里面。

2.退出的时候，请求退出接口，把缓存里面的access_token清除。

一旦要在登陆里面做一些行为，比如，在后面新加一些数据传递给登陆接口，做数据收集。就要在登陆的Login.vue模块

里面直接修改。模块里面的代码很多。所有的逻辑都混在一起。

所以可以把登陆和退出的变量和行为抽离出来，在状态管理里统一管理。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

　　

把退出，登陆的模块都封装在一个状态模块上面

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

　　

对用户权限判断是否可以进入某个页面的时候，统一在路由钩子里进行执行。

比如 登陆进首页，需要判断用户权限，从别的页面进首页，仍然要判断用户权限。

如果页面进入分别写在登陆页面，和别的页面，代码就不好维护，都在vue路由的导航守卫里面进行处理

登陆异步代码 ，和login模块里面的回调。

state状态管理里面， mutations是立即执行的，actions 可以是异步的，所以用actions。

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

const loginSet = {
    state: {
        access_token: null
    },
    mutations: {
         setAccessToken(state, param){
             state.access_token = param.value;
         }
    },
    actions: {
        loginAsync({ commit }){
            return new Promise((resolve, reject)=>{
                setTimeout(()=> {
                    commit({
                        type: 'setAccessToken',
                        value: 'ajshdksjjsd' //我随便写了几个值
                    });
                    resolve();
                }, 1000)
            });
        }
    },
    getters: {

    }
};

const store = new Vuex.Store({
    modules: {
        login: loginSet
    }
})

export {store};　　

登陆模块的调用，异步回调

this.$store.dispatch('loginAsync').then(()=>{
           //如果登陆成功了以后，回调
           console.log(this.$store.state.login.access_token);
           this.$router.push('首页');
 });