Vuex 设置全局状态

Vuex 设置全局状态

1. 全局引入vue, vuex, cookie

import Vue from 'vue'
import Vuex from 'vuex'
import cookie from './cookie'

2. 创建Vuex store 实例

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

3. 设置全局状态变量

const userInfo = {
	name: cookie,getCookie('name')|| '',
	token: cookie.getCookie('token')||'',
	role:cookie.getCookie('role')||'student',
}
const state = {
	UserInfo,
}

4. 设置获取全局状态的getters

const userInfo = state =>{
	return state.userInfo
}
const getters ={
	userInfo,
}

5. 创建修改state 状态的mutations

const SET_INFO = 'SET_INFO';
const types = {
	SET_INFO,
}
const mutations = {
	[types.SET_INFO](state){
		state.userInfo = {
			name: cookie,getCookie('name')|| '',
			token: cookie.getCookie('token')||'',
			role:cookie.getCookie('role')||'student',
		}
	}
}

6. 创建触发mutation的actions

function makeAction(type){
	return ({commit}, ...args) => commit(type, ...args);
};
const setInfo = makeAction(type.SET_INFO);