Vuex的简单实例(5)

Vuex之action

1）在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。那我们想异步操作怎么办？作用：在actions中提交mutation，并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）。
Action类似于Mutation，不同在于：
Action提交的是mutation，而不是直接变更状态；
Action可以包含任意异步操作，
让我们在store.js里来注册一个简单的action

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

2）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')
      }
    }

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

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

4）回到Login.vue调用action试试。Action通过store.dispatch方法触发（调用）

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('/') // 跳到首页
    }
  }

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

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

Vuex之mapActions

1）前面已经说过mapState、mapGetters、mapMutations，让我们实践，修改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('/') // 跳到首页
    }
  }

预览效果：