脚本宝典收集整理的这篇文章主要介绍了Vue 教程第十六篇—— Vuex 之 action，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Action

先引用官方文档的说法

Action 类似于 mutation，不同在于：

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

实现上是没问题，action 调用 mutation，但关于异步要放到 action 的说法，个人观点是没有这个必要，在 mutation 的小结中有说到过，mutation 只做同步也不是制性的

在使用 Action 前先与 Mutation 做个小结

• action 并不是必须的，项目中完全可以不需要 action
• 异步操作可放 mutation 和 action，只要开发时方便，都没有影响
• 关于官方说 action 异步，mutation 同步的说法只是为了能用 devtools 追踪状态变化。
• action 中的方法和 mutation 一样，最多只有两个形参，第一个为 context，可以理解为 Store，第二个为手动传的参数
• action 用 commIT() 来触发 mutation
• view 层通过 store.dispath 来分发 action

简单使用

在 action

store.js

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

Vue.use(Vuex)

let state = {
    count: 0
}

let getters = {
    total: (state) => (symbol) => {
        return (symbol || '$') + state.count;
    }
}

let mutations = {
    increment(_state, n){
        console.log(arguments)
        _state.count += n || 1;
    },
    decrement(){
        state.count -= 1;
    }
}

let actions = {
    increment(context, n){
        context.commit('increment', n)
    }
}

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

export default store

分发 action

<input type="button" value="increment" @click="$store.dispatch('increment', 5)"/>

mapActions

和 mutation 的使用方法基本一样

methods: {
    ...mapActions(['increment']),
    ...mapActions({add: 'increment'})
}

脚本宝典总结

以上是脚本宝典为你收集整理的Vue 教程第十六篇—— Vuex 之 action全部内容，希望文章能够帮你解决Vue 教程第十六篇—— Vuex 之 action所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。