Vuex 简单使用

        Vuex是一个类redux的状态管理器，我们可以通过vuex对复杂状态进行管理，当一个页面存在多级父子状态调用，或者兄弟之间状态调用的时候，我们就可以使用vuex进行状态管理。

        简单的说Vuex有一个公用的sotre，所有要用的状态state都储存在里面，可以直接get到，但是当我们更改状态的时候，就必须根据约定好的的mutations（同步状态），actions（异步状态）通过commit（更改同步状态）dispatch（更改异步状态）去更改状态，相应的vuex内置了一个发布订阅者功能，当我们通过这两个方法去更改state状态的同时，所有订阅了state的状态也会相应的收到发布去更改，这一步操作vuex已经帮我们封装了，我们不需要关心这一步，有兴趣的可以看一下redux的源码，本质就是一个发布订阅者模式，状态更改后会推送到每一个订阅了状态的地方，去更改state。

        一般我们会在src文件目录下建一个store文件，里面包含两部分，一部分是一个modules文件夹，用来隔离我们不同页面所需要的reducer（没想好叫什么 这个类似一个纯函数方法），一个getters.js文件，用来我们方便使用mapGetters等；

首先我们先在modules文件夹里建立一个menu.js文件来管理我们的菜单名称：

const menu = {
  state: {
    menuTitle: 'xx系统',
  },

  mutations: {
    SET_MENU_NAME: (state, menuTitle) => {
      state.menuTitle = menuTitle
    },
  },

  actions: {
    GenerateMenu({ commit }) {
      return new Promise(resolve => {
        // 向后端请求路由数据（菜单）
        getMenu().then(res => {
          resolve(res)
          commit('SET_MENU_NAME', res.menuTitle) 
        })
      })
    }
  }
}

export default menu

然后我们在getters.js里写入，这样我们直接通过mapGetters在全局获取这个值

const getters = {
  //菜单名称
  menuTitle:state => state.menu.menuTitle
}
export default getters

之后我们在store里新建一个index.js

import Vue from 'vue'
import Vuex from 'vuex'
import menu from './modules/menu'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    menu
  },
  getters
})

export default store

我们在main.js里注入这个store

import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

这样我们就可以在全局里使用这个