Vuex 状态管理器

全局状态管理，在任意组件里通用，可以进行获取、修改，并且修改的值会得到全局的响应变更。

总结：
1、获取变量值xxx：this.store.commit('SET_TOKEN', '123456789')

1、安装

npm install vuex --save

2、在src目录下新建一个名为store的文件夹，为方便引入在store文件夹里新建一个index.js，js里引入vue和vuex，vue引用vuex，并初始化store，最后暴露出去。代码如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();

export default store;

3、在main.js里引入store，再全局注入，这样就可以再任一组件通过this.$store.xxx 获取变量值xxx

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {App}
})

下面开始state

1、定义初始变量
在store文件夹里的index.js里，引入Vue和Vuex 并使用，再声明一个state变量对象，内含所有的变量初始化，再把state对象赋值给store，并暴露store出去

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { // 设置全局访问的state对象
  token: '', // 设置初始属性值
  name: '',
  avatar: ''
};
const store = new Vuex.store({
  state
});
export default store;

2、通过getters获取变量值

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { // 设置全局访问的state对象
  token: '', // 设置初始属性值
  name: '',
  avatar: ''
};
const getters = {
  getToken(state) {
    return state.token
  },
  getName(state) {
    return state.name
  }
};
const store = new Vuex.store({
  state,
  getters 
});
export default store;

3、通过mutattions改变初始变量值
改变初始变量值： this.$store.commit('SET_TOKEN', '123456789')

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { // 设置全局访问的state对象
  token: '', // 设置初始属性值
  name: '',
  avatar: ''
};
const getters = {
  getToken(state) {
    return state.token
  },
  getName(state) {
    return state.name
  }
};
const mutations = {
  SET_TOKEN: (state, token) => { // 这里的token是新的要传入的值
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
}
const store = new Vuex.store({
  state,
  getters,
  mutations
});
export default store;

但是mutations里面的方法 都是同步事务，意思就是说：比如这里的一个this.$store.commit('SET_TOKEN','123456789')方法,两个组件里用执行得到的值，每次都是一样的，这样肯定不是理想的需求

4、通过Actions异步触发mutations里面的方法
改变初始变量值：this.$store.dispatch('login'，data)

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { // 设置全局访问的state对象
  token: '', // 设置初始属性值
  name: '',
  avatar: ''
};
const getters = {
  getToken(state) {
    return state.token
  },
  getName(state) {
    return state.name
  }
};
const mutations = {
  SET_TOKEN: (state, token) => { // 这里的token是新的要传入的值
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
};
const actions = { // 可以直接commit mutations里面地方方法如changeName，也可以写信逻辑如login
    login({ commit }, userInfo) {
     const { username, password } = userInfo
     return new Promise((resolve, reject) => {
       login({ username: username.trim(), password: password }).then(response => {
         const { data } = response
         commit('SET_TOKEN', data.token)
         setToken(data.token)
         resolve()
       }).catch(error => {
         reject(error)
       })
     })
  },
 changeName({ commit }, data) {
   commit('SET_NAME', data)
 }
};
const store = new Vuex.store({
  state,
  getters,
  mutations，
  actions
});
export default store;