Vuex的使用（十）——mutations和actions的返回值测试

迈不过友情╰ 2022-09-11 06:13 204阅读 0赞

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

在官方网站中有关于actions返回结果的例子，但却没有mutations返回结果的例子，经过笔者的验证发现：

**actions允许返回结果，但mutations不允许返回结果（即使写了return也不生效）。**

首先在Vuex中补充返回结果的mutations（mutation3方法，修改文件路径为src\\store\\index.js），下面上代码：

import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({ 
        state: { 
            param1: "state param"
        },
        getters: { 
            param2: state => { 
                return `new ${ state.param1}`;
            },
            // 在getters中可以使用其他getters
            param3: (state, getters) => { 
                return `another ${ getters.param2}`;
            },
            // getter支持返回一个函数
            param4: state => index => { 
                return state.paramArray[index];
            }
        },
        // mutations必须是同步函数（即函数内不能有异步行为）且不支持相互调用（如下面的mutation1不能调用mutation2）
        mutations: { 
            mutation1: state => { 
                // 在mutations的回调函数内可以修改state的值
                state.param1 += " add something";
            },
            // mutations支持传递参数（第二个参数）
            mutation2: (state, addString) => { 
                state.param1 += addString;
            },
            /** * Vuex不允许mutations返回任何信息，但如果我们声明返回的是一个promise， * 虽然在调用处无法获取到promise对象，但这个promise仍可以执行 */
            mutation3: () => { 
                return new Promise((resolve, reject) => { 
                    setTimeout(() => { 
                        console.log("1000ms pass");
                        resolve();
                    }, 1000);
                })
            }
        }
    });
    
    export default store;

然后在独立actions文件中补充返回结果的actions（action4和action5，修改文件路径为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");
        },
        async action4(context) { 
            return new Promise((res, rej) => { 
                setTimeout(() => { 
                    console.log("enter setTimeout");
                    res();
                }, 1000);
            })
        },
        // 与mutations不同的是，actions允许返回信息（以下为处理另一个actions返回的promise）
        async action5({ dispatch }) { 
            let re = await dispatch("action4").then(() => { 
                console.log("enter then");
                return "result";
            });
            console.log(`re is ${ JSON.stringify(re)}`);
        }
    };

在组件中引入有返回结果的mutations和actions（新增文件路径为src\\components\\componentJ.vue），代码如下：

<template>
        <div>
            <span>测试mutations和actions是否允许返回promise对象</span>
        </div>
    </template>
    
    <script> import { mapMutations, mapActions } from "vuex"; export default { name: "component-j", methods: { ...mapMutations(["mutation3"]), ...mapActions(["action5"]) }, created() { let promise = this.mutation3(); // 在控制台可以看到promise的打印结果为undefined，即mutations是不允许有return结果的（即使我们写了return也获取不到） console.log(`promise is ${ promise}`); // promise.then(() => { // console.log("next action complete"); // }); this.action5(); } }; </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'
    import ComponentJ from './components/ComponentJ.vue'
    
    new Vue({ 
        el: '#app',
        store,
        components: {  ComponentA, ComponentB, ComponentC, ComponentD, ComponentE, ComponentF, ComponentG, ComponentH, ComponentI, ComponentJ },
        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><component-j></component-j></div>'
    });

运行后在控制台可以看到mutation3返回了undefined（虽然return的Promise执行了），而action5则拿到了action4返回的Promise对象。