Vuex 详细操作

前言

上一章，讲解了 vuex 的入门，主要阐述了 state、getters、mutations、actions 四个 vuex 的基础内容。state 用于存放全局状态，getters 是衍生状态，类似于组件中的 computed 属性。mutations 是唯一能够改变状态的方法，所有更改数据的操作都要经过 mutations，且 mutations 只能进行同步的状态更改。actions 是所有异步更改状态的集中，主要是用于区分 mutations，利于状态的维护。

上一章主要是简单地介绍 vuex，并未对其使用进行一个详细地演示。那本章，将重点介绍一下上述几个方法的使用。

mutations

官方案例里使用 count 进行演示，确实更加通俗易懂。但为了进行一个详细的讲解，让我们升级一下难度。

首先，假设现在做一个注册功能，至少需要三个信息：

1. 用户名
2. 邮箱
3. 密码

假设现在有一个注册的组件，里面有一个表单收集上述三个信息。同时，别忘了，既然是注册就会涉及到表单的提交、网络的请求以及结果的响应。前面也提到，网络请求都是异步更改状态的操作，异步操作就必须使用 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 的方便之处正是对数据的全局管理，分包得太复杂也不见得是好事，具体自然是视情况而定。

好了，今天的分享就到这里。点个关注撒！