vuex官网说“vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。”
既然我浅谈vuex，那我的理解就是“vue的全局变量。”我相信说到全局变量大家应该就不陌生了，一个页面在哪都能用的变量。vuex好像更牛点，它是全部页面都能用的变量。

浅谈vuex

什么情况下用

我们做大型系统，肯定有登入页面，当员工输入账号密码登入成功后，肯定需要保存员工的id、头像、权限、手机号码等等，在我们查询某些信息时，需要把员工信息带上，以便后端人员用用户信息判断从数据库获取那些信息。
我们以保存id为例，后端通过员工id查询他的账号信息、他名下员工、他某个月的业绩等等。
 

vuex的结构

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    // 全局变量
    state: {
        id: '', // 员工id
    },
    // 同步操作，修改state里的信息都在这里实现
    mutations: {},
    // 异步操作获取信息
    actions: {},
    // 既然我们浅谈vuex，modules这个稍微难的就先忽略
    modules: {}
})

从上面代码注释可以看出，想要改变全局变量的值需要在mutations里操作，而mutations里不能写异步操作(不能写ajax)，要用ajax获取值需要在actions里写。
 

使用vuex获取员工信息并保存

mutations: {
  // 保存id到state.id里
  set_id(state,id){
    state.id = id
  }
},
actions:{
  // Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
  get_id(context){
    // 为了更好的展示actions为异步操作，停止3秒再发起ajax请求
    setTimeout(()=>{
      // 发起ajax请求获取id
      axios.get(
        '/xxxxx/id'
      ).then((response)=>{
        // 触发mutations里的set_id函数，保存获取到的id
        // commit的第一个参数是mutations里的函数名，第二个参数是向该函数传递的数据
        context.commit('set_id',response.data)
      })
    },3000)
  }
}

从上面代码可以看出actions和mutations的区别和用法，只要记住actions是异步获取数据，mutations是用来改变state里变量值的。
 

使用vuex

使用就非常简单了
html：

// html里使用state.id变量
{{$store.state.id}}

js:

// 通过dispatch触发actions里的get_id函数
this.$store.dispatch('get_id')
// js里使用state.id变量
this.$store.state.id

使用store需要注意，刷新页面，数据就需要重新获取。想再本第缓存还是要靠cookie、localStorage和sessionStorage。