Vuex的使用（九）——actions的其他用法

参考文档：https://vuex.vuejs.org/zh/guide/

在上一章的例子中介绍了actions可以在内部发起异步请求，且能够在内部调用mutation，下面介绍一下actions的其他用法：

actions和mutations一样允许传一个自定义参数；
actions支持互相调用（mutations不支持）；
actions允许返回结果。

在上一章的独立actions文件中扩展定义（修改文件路径为src\store\action.js），代码如下：

export default {// context对象中包含state、commit和dispatch，分别对应vuex中的state、执行mutations方法和执行actions方法action1: context => {setTimeout(() => {context.commit("mutation1");}, 1000);},/*** actions支持传递参数（第二个参数），如果获取commit或调用commit、dispatch频繁的话，* 可以通过解构赋值的方式直接拿到context对象里面的state、commit和dispatch*/action2: ({ commit, state }, addString) => {setTimeout(() => {if (state.param1 === "state param") commit("mutation2", addString);}, 1000);},// actions支持相互调用action3: ({ dispatch }) => {dispatch("action1");}
};

在组件中引入带自定义参数actions（action2方法，新增文件路径为src\components\componentH.vue），代码如下：

<template><div><span>带参数action用法</span><br /><span>state in vuex：{{param1}}</span><br /><button @click="action2(' add someone')">action</button></div>
</template><script>
import { mapState, mapActions } from "vuex";
export default {name: "component-h",computed: {...mapState(["param1"])},methods: {...mapActions(["action2"])}
};
</script>

在组件中引入互相调用actions（action3方法，新增文件路径为src\components\componentI.vue），代码如下：

<template><div><span>action嵌套</span><br /><span>state in vuex：{{param1}}</span><br /><button @click="action3()">action</button></div>
</template><script>
import { mapState, mapActions } from "vuex";
export default {name: "component-i",computed: {...mapState(["param1"])},methods: {...mapActions(["action3"])}
};
</script><style scoped>
</style>

引用上面创建的组件查看效果（修改文件路径为src\main.js），代码如下：

import Vue from 'vue'
import store from './store'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'
import ComponentD from './components/ComponentD.vue'
import ComponentE from './components/ComponentE.vue'
import ComponentF from './components/ComponentF.vue'
import ComponentG from './components/ComponentG.vue'
import ComponentH from './components/ComponentH.vue'
import ComponentI from './components/ComponentI.vue'new Vue({el: '#app',store,components: { ComponentA, ComponentB, ComponentC, ComponentD, ComponentE, ComponentF, ComponentG, ComponentH, ComponentI },template: '<div><component-a></component-a><component-b></component-b><component-c></component-c><component-d></component-d><component-e></component-e><component-f></component-f><component-g></component-g><component-h></component-h><component-i></component-i></div>'
});

运行后点击第一个action可以看到传入的自定义参数参与了逻辑运算，点击第二个action可以看到action3内部调用的action1仍然可以生效。

Vuex的使用（九）——actions的其他用法相关推荐

Android 性能优化lt;九 RecyclerView替代Listview用法
Android 性能优化 (一)APK高效瘦身 http://blog.csdn.net/whb20081815/article/details/70140063 Android 性能优化 (二)数据 ...
【手写 Vuex 源码】第五篇 - Vuex 中 Mutations 和 Actions 的实现
一,前言上一篇,主要介绍了 Vuex 中 getters 的实现,主要涉及以下几个点: 将选项中的 getters 方法,保存到 store 实例中的 getters 对象中: 借助 Vue 原生 ...
Vuex中mutations与actions的区别与用法
一.区别操作描述 mutations 一般用于方法同步调用,修改vuex中state的状态. actions 一般用于方法异步调用,多用于请求后台接口. 注:mutations 同步操作,不能写异 ...
vuex的计算属性_vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
Vue中Vuex的五个属性和基本用法
一.Vuex的五个核心概念:state.getters.mutations.actions.modules 1.state: vuex的基本数据,用来存储变量: 2.getters: 从基本数据(st ...
vuex模块化怎么引用state_[Vuex系列] - 细说state的几种用法
state 存放的是一个对象,存放了全部的应用层级的状态,主要是存放我们日常使用的组件之间传递的变量. 我们今天重点讲解下state的几种用法,至于如何从头开始创建Vuex项目,请看我写的第一个文章. ...
vuex基础mutations和actions
state数据的修改只能通过mutations,并且mutations必须是同步更新,目的是形成`数据快照` 数据快照:一次mutation的执行,**立刻**得到一种视图状态,因为是立刻,所以必须是 ...
VueX的mutations、actions
一.更改Vuex的store中的状态的唯一方法是提交mutation.Vuex中的mutation非常类似于事件:每个mutation都有一个字符串的事件类型和一个回调函数,这个回调函数就是我们实际进 ...
[网络安全自学篇] 四十九.Procmon软件基本用法及文件进程、注册表查看
这是作者的网络安全自学教程系列,主要是关于安全工具和实践操作的在线笔记,特分享出来与博友们学习,希望您们喜欢,一起进步.前文分享了Cracer教程的第一篇文章,详细讲解了安全术语.Web渗透流程和Wi ...

Vuex的使用（九）——actions的其他用法

Vuex的使用（九）——actions的其他用法相关推荐

最新文章

热门文章