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

蔚落 2022-09-10 15:20 176阅读 0赞

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

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

1.  actions和mutations一样允许传一个自定义参数；
2.  actions支持互相调用（mutations不支持）；
3.  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仍然可以生效。