Vuex Action教程

发布时间：2023-04-04 08:47:08 所属栏目：教程来源：

导读：Action 类似于 Mutation，不同的是：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。在 vuex 的使用过程中，我们可以将多个 Mutation 合并到一个 Action 中，也可以通过 Action

Action 类似于 Mutation，不同的是：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。在 vuex 的使用过程中，我们可以将多个 Mutation 合并到一个 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 通过 store.dispatch 方法触发：

store.dispatch('increment')

你可以向 store.dispatch 传入额外的参数，即 Actions 的载荷（payload）：

action: {
increment ({commit}, payload) {
// 具体 action 内容
}
}
store.dispatch('increment', {count: })

提交 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，并传入对应参数。

mapActions 可以接收一个 action 事件名的数组：

...mapActions([
// 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
'increment'
]),

在某些情况，我们需要对 Action 中的函数名重命名以避免和组件内部的变量冲突，这时候我们可以使用对象的方式接收参数：

...mapActions({
[别名]: [Action name]
})
// 例：将 `this.add()` 映射为 `this.$store.dispatch('increment')`
...mapActions({
add: 'increment'
})
完整示例：

<!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="increment">添加</button>
<button @click="add">别名添加</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')
}
}
})
var vm = new Vue({
el: '#app',
store,
methods: {
...Vuex.mapActions([
'increment'
]),
...Vuex.mapActions({
add: 'increment'
})
},
computed: {
count() {
return this.$store.state.count
}
}
})
</script>
</html>
代码解释
JS 代码第 23-25 行，我们通过 mapActions 将 this.increment () 映射为 this.$store.dispatch (‘increment’)。
JS 代码第 26-28 行，我们通过 mapActions 将 this.add () 映射为 this.$store.dispatch (‘increment’)。

（编辑：汽车网）

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