继续上一篇文章来说一下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)来请求这个方法