vuex 的模块中如何调用 actions 中的方法
vuex 的模块中如何调用 actions 中的方法
模块vuexTest.js
/** * 模块vuexTest.js */ export default { namespaced: true, actions: { actionsHello(context, val) { console.log(context, "context"); // 与 store 实例具有相同方法和属性的 context 对象 属性有 state、getters、rootGetters、rootState、commit、dispatch console.log(val, "val"); // 传的参数 }, // actionsHello({ state, getters, rootGetters, rootState, commit, dispatch }, val) { // 才有es6 的解构 // console.log(state, "state"); // console.log(val, "val"); // 传的参数 // } } }
1、不使用辅助函数 mapActions 情况下
<!--test.vue--> <template> <div class="vuexRequest"> vuexRequest <el-button @click="change" type="primary">点击</el-button> </div> </template> <script> export default { methods: { change() { this.$store.dispatch("vuexTest/actionsHello", "val123456"); // 前面是指定模块vuexTest 中的actionsHello 方法,后面是传参 可以是对象、数组、字符串等 } }, } </script>
2、适用辅助函数 mapActions 情况下
<!-- test.vue --> <template> <div class="vuexRequest"> vuexRequest <el-button @click="change" type="primary">点击</el-button> </div> </template> <script> export default { methods: { // 辅助函数的数组形式 ...mapActions("vuexTest", ["actionsHello"]), // 辅助函数的对象形式 ...mapActions("vuexTest", { actionsHello: 'actionsHello' }), ...mapActions("vuexTest", { actionsHello123: 'actionsHello' // 改变模块vuexTest 中actions 中 方法映射 }), // 方法调用 change() { this.actionsHello("testVal"); // "testVal" 为函数的传参 this.actionsHello123("testVal"); } }, } </script>