axios 后台管理项目 - vuex使用

继续上一篇文章来说一下vuex的简单使用，一个基本的vue后台项目，需要反复使用到token这些变量，这里需要一个可以用来储存全局变量的方法，所以就用到了vuex

vuex的使用方法和demo在官网都有:https://vuex.vuejs.org/zh-cn/

我认为vuex有点类似于一个存储全局变量和方法的一个工具，在组件内或者其他js中都可以很方便的调用。

我这里就把这些设置文件分割成各个模块，项目结构如下：

├── App.vue
├── main.js
├── api
├── components
└── store
    ├── index.js # 组装模块并导出 store 的地方
    ├── actions.js
    ├── mutations.js
    ├── states.js
    └── types.js

index.js

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

import state from './states.js'           //状态值
import mutations from './mutations.js'   //同步修改 state的值
import actions from './actions.js'       //异步修改state的值

Vue.use(Vuex);

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

states.js

const state = {
    currentUser:{
        get UserName(){
            return localStorage.getItem("userName");
        },
        get UserToken(){
            return localStorage.getItem("token");
        },
        get UserRefreshToken(){
            return localStorage.getItem("refresh_token");
        }
    }
};

export default state;

在组件内可以用this.$store.state.currentUser.UserToken来读取localstorage里的token

types.js

这个文件是储存一些常量，这些常量可以用来替代 Mutation 事件类型,在actions里提交事件也可以使用

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

mutations.js

import * as types from './types.js'

const mutations = {
    [types.LOGIN]: (state, data) => {
        localStorage.setItem('userName',data.username);
        localStorage.setItem('token',data.token);
        localStorage.setItem('refresh_token',data.refresh_token);
    },
    [types.LOGOUT]: (state) => {
        localStorage.removeItem('userName');
        localStorage.removeItem('token');
        localStorage.removeItem('refresh_token');
    }
};

export default mutations;

actions.js

import * as types from './types.js'

//actions常用于异步更改状态。也就是说它一般用来先发送请求，然后再commit
export default {
    UserLogin({commit}, data){
        commit(types.LOGIN, data);
    },
    UserLogout({commit}){
        commit(types.LOGOUT);
    }
}

在组件内可以用this.$store.dispatch(‘UserLogin’,data)来请求这个方法