前言
上一章，讲解了 vuex 的入门，主要阐述了 state、getters、mutations、actions 四个 vuex 的基础内容。state 用于存放全局状态，getters 是衍生状态，类似于组件中的 computed 属性。mutations 是唯一能够改变状态的方法，所有更改数据的操作都要经过 mutations，且 mutations 只能进行同步的状态更改。actions 是所有异步更改状态的集中，主要是用于区分 mutations，利于状态的维护。
上一章主要是简单地介绍 vuex，并未对其使用进行一个详细地演示。那本章，将重点介绍一下上述几个方法的使用。
mutations
官方案例里使用 count 进行演示，确实更加通俗易懂。但为了进行一个详细的讲解，让我们升级一下难度。
首先，假设现在做一个注册功能，至少需要三个信息：
- 用户名
- 邮箱
- 密码
假设现在有一个注册的组件，里面有一个表单收集上述三个信息。同时，别忘了，既然是注册就会涉及到表单的提交、网络的请求以及结果的响应。前面也提到，网络请求都是异步更改状态的操作，异步操作就必须使用 actions。也就是说，网络的请求都是在 actions 里完成的。
有了上述共识，先来想象。如何让 actions 里的网络请求拿到表单数据？也就是用户输入的内容？表单数据在注册组件里，如何让 vuex 文件里的 actions 拿到数据发给后端？
是的，这不就是 vuex 做的事情吗？这个表单数据完全可以存到 state 中来。这也正是 vuex 存在的意义。
所以，先在 state 里定义一个状态RegisterForm：
// store 文件夹下的 index.js
const store = new Vuex.Store({
state: {
RegisterForm: {}
}
})
接着，在 mutations 里定义一个方法保存表单数据：
const store = new Vuex.Store({
state: {
RegisterForm: {}
},
mutations：{
// 保存表单数据的方法
SaveRegisterForm (state, form) {
state.RegisterForm = form
}
}
})
可以看到，SaveRegisterForm接收两个参数，一个是 state，一个是form，这个 form 是一个形参，接收组件传递过来的表单数据。
如何传递过来呢？在注册组件里，用户输入完基本信息后会点击一个注册的按钮，可以在这个按钮上定义一个点击事件：
// 注册组件
data () {
return {
registerForm: {}
}
},
methods: {
register () {
// 这里先将表单数据保存到 state 中的 registerForm 里
// 这里是同步操作，所以通过 mutations 保存数据
this.$store.commit('SaveRegisterForm'，this.registerForm)
}
}
上面的代码中，通过 commit 方法的第一个参数指定 mutations 中存储表单数据的方法；第二个参数将表单数据传递过去。mutations 中的 SaveRegisterForm 接收到参数后执行，将组件里的 registerForm 保存在 state 中的 RegisterForm。
既然数据已经保存在 state 中了，actions 执行异步的网络请求时，自然方便地拿到表单数据发送给后端，实现注册的逻辑了。
actions
与 mutations 一样，异步改变状态的方法需要写在 actions 里，通过组件里的方法触发，就像通过commit触发 mutations 里的方法一样。
好，现在用户点击了注册按钮，将表单数据传到了 state 中。第二步，就是发送请求：
actions: {
// 执行注册请求，异步更新 token 与 user 信息
async registerFunc (context, data) {
try {
const res = await register()
if (res.status === 200) {
context.commit('SaveToken', `Token ${res.data.user.token}`)
context.commit('SaveUser', res.data.user)
}
return res
} catch (err) {
return Promise.reject(err.response)
}
}
}
请仔细阅读上面的代码，关键点非常之多，下面来一层一层剖析。
dispatch
首先，在注册组件中：
// 注册组件
data () {
return {
registerForm: {}
}
},
methods: {
register () {
// 这里先将表单数据保存到 state 中的 registerForm 里
// 这里是同步操作，所以通过 mutations 保存数据
this.$store.commit('SaveRegisterForm'，this.registerForm)
// 触发 actions 里的异步更改状态的方法 registerFunc
this.$store.dispatch('registerFunc')
}
}
注意这里的 dispatch方法，与 commit 方法一样，是一个触发函数，用于触发 actions 里的异步方法。
context 与 data
紧接着，registerFunc 被执行，这里使用了 async 关键字。registerFunc 接收了两个参数，第一个是 context，可以理解为孪生的 store，先暂时不用关注。第二个参数是一个 data，data 其实是组件中调用this.$store.dispatch('registerFunc')时传递过来的数据。但上面的案例其实没有用到，这里只是做一个讲解演示。像这种没有用到传递过来的 data 时，可以将async registerFunc (context, data)变为async registerFunc ({ commit })，context.commit 可以省略 context。
commit('SaveToken', `Token ${res.data.user.token}`)
commit('SaveUser', res.data.user)
register
你应该看到了这个方法，这其实是一个封装好的网络请求的函数，用于发起注册的请求。你只要知道是什么就好，这不是今天的主题。
commit
想必看到这里，你也注意到了上面两个SaveToken，SaveUser。还记得之前说的吗，要想改变状态，只能通过 mutations。这两个便是定义在 mutations 里的方法，用于保存用户的身份令牌 token 以及个人信息。
const store = new Vuex.Store({
state: {
RegisterForm: {},
Authorization: localStorage.getItem('Authorization'),
User: localStorage.getItem('User')
},
mutations：{
// 保存表单数据的方法
SaveRegisterForm (state, form) {
state.RegisterForm = form
},
// 修改token，并将token存入 localStorage
SaveToken (state, token) {
state.Authorization = token
localStorage.setItem('Authorization', token)
},
// 存储用户信息
SaveUser (state, user) {
state.User = user
localStorage.setItem('User', state.User)
}
}
})
通过 commit 方法触发SaveToken，SaveUser两个函数，保存响应结果中的 token 与 user 信息。
响应处理
发送了请求，就会有结果响应，不管是成功还是失败，都必须进行处理。网络请求是在 actions 中，但错误的处理是在组件里。因为用户的每次操作都必须有响应的反馈，这就是交互。成功了得给用户提示成功，失败了也一样。并且成功和失败还有可能是各种各样的，原因也不尽相同，需要有所针对。
请求后会有响应，不论成功失败都需要放到组件中去处理，例如注册的请求结果放到注册组件里去处理。想来也是如此，vuex 中也没法对这些响应的结果做处理，即使有一些什么方法可以实现，也不能这样做，每个工具有它自身肩负的使命。
actions: {
// 执行注册请求，异步更新 token 与 user 信息
async registerFunc (context, data) {
try {
const res = await register()
if (res.status === 200) {
context.commit('SaveToken', `Token ${res.data.user.token}`)
context.commit('SaveUser', res.data.user)
}
return res
} catch (err) {
return Promise.reject(err.response)
}
}
}
回顾上述代码，成功后 return 一个 res，失败了 return 一个 err。因为目前 Vue、React 等框架都支持使用 axios发送网络请求，所以本次讲解也会基于 axios。
axios 是一个基于 Promise 的 AJAX 库，所以可以使用 Promise 语法进行响应结果的处理。
上面 return 的响应结果，可以在组件中接收，也就是在 dispatch 后接收：
// 注册组件
this.$store.dispatch('registerFunc').then(res => {
if (res.status === 200) {
this.$router.push('/')
// 下面是 Antd-vue 的 API，消息提示
this.$message.success('注册成功', 2)
}
}).catch(err => {
const e = err.data.errors
if (err.status === 422 && e.email && e.username) {
this.$message.error('用户名邮箱已被占用')
} else if (err.status === 422 && e.username) {
this.$message.error('用户名已被占用')
} else if (err.status === 422 && e.email) {
this.$message.error('邮箱已被占用')
}
})
在 dispatch 后使用 then 就可以对 res 与 err 分别进行处理。
后记
以上就是一个比较健壮的使用 vuex 的过程，包括同步的数据保存，异步的网络请求数据的保存以及对响应结果的处理。当然，这仍然是一个初步的使用。例如，组件中使用 state、getters、mutations、actions 还有其他的方法，不用每次都使用 this.$store 来进行调用。不过，方法的使用并没有什么规定，上面的写法比较方便简洁，大多数人都会采用 this.$store 来进行触发 state、getters、mutations、actions。
但随着项目的增大，vuex 与请求接口的配合，vuex 中数据量增大后的封装与抽离都会是一些比较重要的工程。但 vuex 的方便之处正是对数据的全局管理，分包得太复杂也不见得是好事，具体自然是视情况而定。
好了，今天的分享就到这里。点个关注撒！
