Vuex的state、getters、mutasions、actions、modules

import vue from 'vue' //引入vue
import vuex from 'vuex' //引入vuex

// vuex 五个概念
// vuex分为五个大块

// state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）

// mutations ： 使用它来修改数据(类似于methods)

// getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

// actions： 发起异步请求

// modules： 模块拆分

//使用vuex
vue.use(vuex);
//创建vuex实例
const store=new vuex.Store({
    state(){//类似data
      return {
        //公共的数据，全局作用域。
        token:'我是全局作用域的token',
      }
    },
    mutations: {//类似methods
        //修改公共数据,本质上是JavaScript函数，专门用来变更store中的数据
        //想要修改State中的数据，只能调用Mutation方法，他是Vuex中用来修改公共数据的唯一入口。
        //调用时用this.$store.commit('mutation名','荷载')来调用
        //mutation必须是同步函数，mutation里面不能放一部代码
        xugaitoken(state,obj){
            debugger
            console.log(obj);
            state.token=obj;
        },
    },
    getters:{//类似computer
        // state 就是上边定义的公共数据state
        getter1(state) {
            return '这就是你想要的值：'+state.token;
        }
    },
    action:{
        action1(context,obj){
            //1.发送异步请求，请求数据
            debugger
            console.log(obj);
            //2.commit调用mutation来修改数据
            context.commit('xiugaitoken',obj)
            
        }
    },
    modules:{
        //将上述的5大对象包装进来
        modules1: {
            // namespaced为true，则在使用mutations时，就必须要加上模块名
            namespaced: true, 
            state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
        },
        modules2: {
            // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
            state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
        },

    }
});

export default store //导出store

调用

  {{this.$store.commit('xugaitoken', "我是修改之后的token")}} 
  {{this.$store.dispatch('xugaitoken')}}
  {{this.$store.state.token}}
  {{this.$store.getters.getter1}}

需求：用户登录成功后将token存在全局的Vuex中，每次http请求时都可以拿到token挂在http请求头中。也可以修改token。

 代码实现如下：

this.$http({
                    headers: {
                        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
                    },
                    method: 'post',
                    url: _this.api+'/api/Login/Login',
                    data:_this.Qs.stringify(this.loginForm)
                }).then(res => {
                    if(res.data.code=='200'){
                        sessionStorage.setItem("currentUserName",res.data.user.userName);
                        sessionStorage.setItem("currentUserId",res.data.user.userId);
                        sessionStorage.setItem("Authorization",res.data.user.sessionId);
                        //添加角色信息存到sessionStorage
                        sessionStorage.setItem("roleType",res.data.user.userType);
                        
                        //上面是sessionStorege缓存用户信息（token保密不安全，容易被用户误操作删除），
                        //下面是使用VUEX储存用户信息。
                        this.$store.commit('addUserInfo', {
                            currentUserName:res.data.user.userName,
                            currentUserId:res.data.user.userId,
                            Authorization:res.data.user.sessionId,
                            roleType:res.data.user.userType,
                        });


                    
                        this.$router.push('/index');
                    }else{
                        this.$message({
                            message: res.data.result,
                            type: 'error'
                        });
                    }
                   
                }).catch(error => {
                    _this.$message({
                        message: '请检查账号密码是否正确！',
                            type: 'warning'
                        });
                    console.log(error);
                });

VUEX.JS

import vue from 'vue' //引入vue
import vuex from 'vuex' //引入vuex

// vuex 五个概念
// vuex分为五个大块

// state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）

// mutations ： 使用它来修改数据(类似于methods)

// getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

// actions： 发起异步请求

// modules： 模块拆分

//使用vuex
vue.use(vuex);
// 创建vuex实例
const store=new vuex.Store({
    state:{
        user:{},
    },
    mutations: {
        //修改公共数据,本质上是JavaScript函数，专门用来变更store中的数据
        //想要修改State中的数据，只能调用Mutation方法，他是Vuex中用来修改公共数据的唯一入口。
        //调用时用this.$store.commit('mutation名','荷载')来调用
        //mutation必须是同步函数，mutation里面不能放异步代码
        addUserInfo(state,obj){
            state.user=obj;
        },
    },
    getters:{
        // state 就是上边定义的公共数据state
        getter1(state) {
            return state.user;
        }
    },
    actions:{
        
    },
    modules:{
        //将上述的5大对象包装进来
        modules1: {
            // namespaced为true，则在使用mutations时，就必须要加上模块名
            namespaced: true, 
            state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
        },
        modules2: {
            // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
            state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
        },

    }
});

export default store //导出store

在main.js文件中引用axsios，添加路由拦截（注意一定要在vue实例挂载之后）

/* eslint-disable no-new */
var app=new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})
// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(

  config => {
    var aa= Request["loginName"];
    if (store.state.user.Authorization) {//先去vuex全局作用域找
      config.headers.token = store.state.user.Authorization;
    }else{//找不到 如sessionstorege找，避免用户误删除。
      // if (sessionStorage.getItem('Authorization')) {
      //   config.headers.token = sessionStorage.getItem('Authorization');
      // }
    }
    return config;
  },
  error => {
    return Promise.reject(error);
});

//在 response 拦截器实现
axios.interceptors.response.use(
  res => {
    const status = res.data.code;
    //如果是未登录
    if(status==401 || status=="401"){
      app.$alert('登录已超时，请重新登录', '提示', {
        confirmButtonText: '确定',
        type:'warning',
        closeOnClickModal:false,
        callback: action => {
          app.$router.push('/login');
          return;
        }
      });
    }
    // if(status=='10010'){
    //   app.$router.push('/login');

    //   //window.location.href="http://localhost:8080";
    // }
    return res;
  }, error => {
    return Promise.reject(error);
});