Vuex Action简介

发布时间：2023-04-19 10:06:12 所属栏目：教程来源：

导读：Action 类似于 Mutation，不同的是：Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。在 vuex 的使用过程中，我们可以将多个 Mutation 合并到一个 Action 中，也可以通过 Action 进

Action 类似于 Mutation，不同的是：Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。在 vuex 的使用过程中，我们可以将多个 Mutation 合并到一个 Action 中，也可以通过 Action 进行异步操作。

定义 action

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

const store = new Vuex.Store({
state: {
count:
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
// 同步 action
increment (context) {
context.commit('increment')
},
// 异步 action
incrementAsync (context) {
setTimeout(() => {
context.commit('increment')
}, )
}
}
})
实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）：

actions: {
increment ({ commit }) {
commit('increment')
}
}

对象风格的提交方式

提交 action 的另一种方式是直接使用包含 type 属性的对象：

store.dispatch({
type: 'increment',
count:
})
当使用对象风格的提交方式，整个对象都作为载荷传给 action 函数，因此 handler 保持不变：

actions: {
increment ({commit}, payload) {
// 具体 action 内容
}
}
完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>购物车数量：{{count}}</div>
<button @click="add">同步 +1</button>
<button @click="addAsync">1s后 +1</button>
<button @click="addAsyncParams">2s后 +1</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
const store = new Vuex.Store({
state: {
count:
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment ({commit}) {
commit('increment')
},
incrementAsync ({commit}) {
setTimeout(() => {
commit('increment')
}, )
},
incrementAsyncParams ({commit}, payload) {
setTimeout(() => {
commit('increment')
}, payload.time)
}
}
})
var vm = new Vue({
el: '#app',
store,
methods: {
add() {
this.$store.dispatch('increment')
},
addAsync() {
this.$store.dispatch({
type: 'incrementAsync',
})
},
addAsyncParams() {
this.$store.dispatch('incrementAsyncParams', {
time:
})
},
},
computed: {
count() {
return this.$store.state.count
}
}
})
</script>
</html>
代码解释
JS 代码第 9-11 行，我们定义了 mutation 事件 increment，事件对 state.count + 1。
JS 代码第 15-17 行，我们定义了同步 Action increment，Action 中直接提交事件 increment。
JS 代码第 18-22 行，我们定义了异步 Action incrementAsync，1 秒后提交事件 increment。
JS 代码第 23-27 行，我们定义了接收参数的异步 Action incrementAsyncParams。
JS 代码第 35 行，分发 Action 事件 increment。
JS 代码第 38-40 行，以对象的形式分发 Action 事件 incrementAsync。
JS 代码第 43-45 行，分发 Action 事件 incrementAsyncParams，并传入对应参数。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!