zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    poj 3280 Cheapest Palindrome(区间DP)
    POJ 2392 Space Elevator(多重背包)
    HDU 1285 定比赛名次(拓扑排序)
    HDU 2680 Choose the best route(最短路)
    hdu 2899 Strange fuction (三分)
    HDU 4540 威威猫系列故事――打地鼠(DP)
    HDU 3485 Count 101(递推)
    POJ 1315 Don't Get Rooked(dfs)
    脱离eclipse,手动写一个servlet
    解析xml,几种方式
  • 原文地址:https://www.cnblogs.com/aidixie/p/14985444.html
Copyright © 2011-2022 走看看