如何深入理解并高效运用Vuex中的actions进行状态管理？

本文共计899个文字，预计阅读时间需要4分钟。

目录

1.设置 actions 事件

2.在组件中分发 actions

3.注意 points：actions 的细节补充

总结紧接上文章节，本篇将讲解 Vuex，并探讨如何去改变 state 和 actions 的使用。

1. 设置 actions 事件

在 Vuex 中，actions 是用来处理异步操作的。它们类似于 mutations，但是提交的是 mutation，而不是直接变更状态。

javascriptconst store=new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { increment(context) { context.commit('increment') } }})

2. 在组件中分发 actions

在组件中，你可以通过调用 `this.$store.dispatch('actionName')` 来分发 actions。

javascriptmethods: { increment() { this.$store.dispatch('increment') }}

3. 注意 points：actions 的细节补充

- actions 支持接收载荷（payload）。- actions 支持在内部进行错误处理。- actions 可以通过 `context` 对象访问 `state`、`getters` 和 `dispatch`、`commit`。

总结

Vuex 提供了一种集中式存储管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通过使用 modules，你可以将 store 分成模块，每个模块拥有自己的 state、mutations、actions 和 getters。在组件中，你可以通过 dispatch 来触发 actions，从而间接地改变 state。

目录

• 1.设置actions事件
• 2.在组件中去分发actions
• 3.注意点
• actions的细节补充
• 总结

紧接上篇文章，本篇文章讲vuex ，如何去改变state ,actions的使用，我依然使用了vuex的modules

1.设置actions事件

index.js

dict.js

2.在组件中去分发actions

<template> <div> <div> 改变vuex index.js 下的state <div> {{ $store.state.userInfo.name + "---" + $store.state.userInfo.age }} </div> <div> <button @click="changeUserInfo">修改方式1</button> </div> <div> <button @click="changeUserInfo2">修改方式2</button> </div> </div> -------------------------------------------------- <div> 改变vuex index.js modules下的dict 下的state <div> {{ $store.state.dict.taskTypeDict }} </div> <div> <button @click="changeDict">修改方式1</button> </div> <div> <button @click="changeDict2">修改方式2</button> </div> </div> </div> </template> <script> import { mapActions } from "vuex"; //方式二 1.首先引入 export default { methods: { // 方式一，dispatch分发事件 changeUserInfo() { this.$store.dispatch("getUserInfo"); }, // 方式二 ...mapActions(["getUserInfo2"]), //2.使用mapActions函数将组件的 methods 映射为 store.dispatch 调用 changeUserInfo2() { this.getUserInfo2(); //3.调用 }, // ------------------------------------------------------------------------------------------- //因为我们在modules下开启了命名空间，所以我们在调用dict下的Actions时，需在前方加上空间名字 changeDict() { this.$store.dispatch("dict/getTaskTypeDict"); }, //因为我们开辟了命名空间，故需要重写一个方法名，进行承接映射,注意此处不再是数组，而是一个对象 ...mapActions({ getDicts: "dict/getTaskTypeDict2" }), changeDict2() { this.getDicts(); }, }, }; </script>

3.注意点

action 类似于 mutation，不同在于

1.action 提交的是 mutation事件，而不是直接去改变state的状态值，改变state的值只有通过mutation

2.action 可以包含任意异步操作

actions的细节补充

1.参数问题

2.context的其他属性

3.另外一种提交风格（见上以对象的形式进行分发）

//store的index.js中 actions: { // 放函数 // 1.参数问题 incrementAction(context, payload) { console.log(payload) setTimeout(() => { context.commit('increment') }, 1000); }, // 2.context的其他属性 decrementAction({ commit, dispatch, state, rootState, getters, rootGetters }) { commit("decrement") } }

总结

到此这篇关于vuex新手进阶篇之actions使用的文章就介绍到这了,更多相关vuex actions的使用内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！