我想让用户感受快一点，localstorage 又太 low 了，那数据缓存怎么做呢

安装

可以使用 npm 进行安装

1	npm install vuex --save

在一个模块化的打包系统中，必须显式地通过 Vue.use() 来安装 Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

同 vue-router，在配置文件和 main.js 中均需要显式引入

基本流程

首先要介绍一下 vuex 的基本原理（如图）

vuex 有三个重要部分

actions，用来标识用户的动作，比较宏观，可能涉及多个数据
mutations，针对单个数据的变化规则
state，存放数据之地

并有 3 个动作

dispatch，分发外部事件到代码事件
commit，提交事务到 mutations
mutate，落实数据变更

为什么不直接修改数据，而是要这样一层层控制呢？因为数据不是随便的人！！

咳咳，不是，是数据不能随便改

如果人人都能随便改数据的话，那要是数据出了事情，比如虚空置 0，那谁来负责？

所以要一层层处理，先分发任务，然后提交事务，再修改，中间配合日志系统，未来万一出错了才方便溯源

这也和 spring 什么的是一样的，为什么 controller 不能直接负责所有代码？因为业务复杂，数据要保证足够的安全性，所以先 dispatch 到 service 层，再 commit 到 dao 层，dao 层再去使用 mapper 层提供的接口来修改数据

配置

那么给一个 vuex 配置的范例

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isLogin: false
  },
  mutations: {
    setIsLogin (state, isLogin) {
      state.isLogin = isLogin
    }
  },
  actions: {
    setIsLogin (context, isLogin) {
      context.commit('setIsLogin', isLogin)
    }
  }
})

export default store

然后在 main.js 中引入

import store from './store/index'
new Vue({
  store,
  ...
})

在外部代码中，就可以使用

1	this.$store.dispatch('setIsLogin', true)

在模板中不用写 this，不过相信大家都知道（

上文实现了在用户登录成功之后，分发参数到指定 actions 方法，actions 再提交到 mutations 等等的流程

上述 dispatch 和 commit，调用式都符合如下模样

1	[dispatch \| commit]([methodName], ...args)

显式指定要触发的方法名称，然后传入一个展开的参数列表

之后的接收方法，都符合以下模样

1	[methodName]([context \| state], ...args)

第一个参数是固定的

如果触发的是 dispatch，那么第一个就是对 mutations 的操作，要对上下文 context 进行 commit

如果触发的是 commit，那么第一个就是数据本身，直接取其字段进行修改即可

最后，再给上述流程补上日志记录，ok，状态管理完成了！

其它

其它其实平时没什么用，也就一个热重载有用吧emmm

不过 myzone 没用到，请各位自行查看官方文档（

感谢阅读