Vuex入门简单示例（五）

前言

我想写一系列关于Vuex的入门文章，我是看着vuex官网文档，结合自己从零搭建的vue项目来实践vuex的知识。

Vuex入门系列：

• Vuex入门简单示例（一）

• Vuex入门简单示例（二）

• Vuex入门简单示例（三）

• Vuex入门简单示例（四）

• Vuex入门简单示例（五）

本文涉及知识点：

1. vuex之action
2. vuex之mapActions

vuex官网描述

在mutation中混合异步调用会导致你的程序很难调试。例如当你调用了两个包含异步回调的mutation来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在Vuex中，mutation都是同步事务。为了处理异步操作，让我们来看一看Action.

Action类似于Mutation，不同在于：

• Action提交的是mutation，而不是直接变更状态
• Action可以包含任意异步操作

让我们在store.js里来注册一个简单的action

src/store.js

const store = new Vuex.Store({
    state: {
    // ...
    },
    getters: {
    // ...
    },
    mutations: {
    // ...
    },
    actions: {
      changeLogin (context) {
        context.commit('changeLogin')
      },
      changeUsername (context) {
        context.commit('changeUsername')
      },
      changePassword (context) {
        context.commit('changePassword')
      }
    }
})

Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters

实践中，可以用参数结构来简化代码：

    actions: {
      changeLogin ({commit}) {
        commit('changeLogin')
      },
      changeUsername ({commit}) {
        commit('changeUsername')
      },
      changePassword ({commit}) {
        commit('changePassword')
      }
    }

因为这三个mutation都是需要传参的，所以action也要能传入参数。

    actions: {
      changeLogin ({commit}, data) {
        commit('changeLogin', data)
      },
      changeUsername (context, data) {
        context.commit('changeUsername', data)
      },
      changePassword (context, data) {
        context.commit('changePassword', data)
      }
    }

回到Login.vue调用action试试

Action通过store.dispatch方法触发（调用）

src/components/Login.vue methods:

  methods: {
    LoginHandle () {
      // 表单验证
      if (!this.username || !this.password ) return;
      
      // 修改isLogin状态
      // this.$store.commit('changeLogin', true)
      this.$store.dispatch('changeLogin', true)
      // 修改username状态
      // this.$store.commit('changeUsername', this.username)
      this.$store.dispatch('changeUsername', this.username)
      // 修改password状态
      // this.$store.commit('changePassword', this.password)
      this.$store.dispatch('changePassword', this.password)
      
      this.$router.push('/') // 跳到首页
    }
  }

貌似和mutation差不多，为啥要多此一举呢？

这是因为mutation必须同步执行。Action就不受约束。我们可以在action内部执行异步操作

    actions: {
      // ...
      changePassword (context, data) {
        setTimeout(() => {
          context.commit('changePassword', data)
        }, 1000)
      }
    }

预览一下，没有任何毛病。

mapActions辅助函数

经过前面的mapState、mapGetters、mapMutations，大概也知道mapActions是怎么回事了。它们都是一个对象。

结合本例，实践一下。

store.js没变

打开Login.vue

引入mapActions

src/components/Login.vue

import { mapActions } from 'vuex'

在methods里面使用...mapActions

src/components/Login.vue

  methods: {
    ...mapActions([
      'changeLogin',
      'changeUsername',
      'changePassword'
    ]),
    LoginHandle () {
      // 表单验证
      if (!this.username || !this.password ) return;
      
      // 修改isLogin状态
      this.changeLogin(true);
      // 修改username状态
      this.changeUsername(this.username);
      // 修改password状态
      this.changePassword(this.password);
      
      this.$router.push('/') // 跳到首页
    }
  }

预览下，应该没问题的

我看了下vuex文档关于action的后面的内容，因为涉及到异步操作，都不是简单示例可以练习的。我自己试着用mockjs和axios，都写出来的话就超出主题了。越扯越远。

就这样吧，以后想到合适的方式再写。

参考文档：Vuex官方中文文档