vue3_element_demo1/demo/vuex-mapState-mapGetters-mapMutations-mapActions/views/OptionsAPIView.vue

<template>
  <!-- 对state的操作 -->
  <h3>对state的操作</h3>
  <p><span><b>根-count: </b></span>{{ count }}</p>
  <p><span><b>A-state_a: </b></span>{{ state_a }}</p>
  <p><span><b>B-state_b: </b></span>{{ state_b }}</p>

  <!-- 对getters的操作 -->
  <h3>对getters的操作</h3>
  <p><span><b>根-getter(3): </b></span>{{ getter(3) }}</p>
  <p><span><b>A-getter_a: </b></span>{{ getter_a }}</p>
  <p><span><b>B-getter_b: </b></span>{{ getter_b }}</p>

  <!-- 对mutations的操作 -->
  <h3>对mutations的操作</h3>
  <p><span><b>根-@click="mutation({num: 7})": </b></span>
    <button @click="mutation({num: 7})">点一下根store+7</button>
  </p>
  <p><span><b>A-@click="mutation_a({num: 8})": </b></span>
    <button @click="mutation_a({num: 8})">点一下state_a+8</button>
  </p>
  <p><span><b>B-@click="mutation_b({num: 9})": </b></span>
    <button @click="mutation_b({num: 9})">点一下moduleB+9</button>
  </p>

  <!-- 对actions的操作 -->
  <h3>对actions的操作</h3>
  <p><span><b>根-@click="action({num: 7})": </b></span>
    <button @click="action({num: 7})">如果store>50 点一下store+10</button>
  </p>
  <p><span><b>A-@click="action_a({num: 8})": </b></span>
    <button @click="action_a({num: 8})">如果state_a>50 点一下state_a+8</button>
  </p>
  <p><span><b>B-@click="action_b({num: 9})": </b></span>
    <button @click="action_b({num: 9})">如果state_b>50 点一下state_b+9</button>
  </p>

  <h3>混合用法</h3>
  <p><span><b>state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a: </b></span>{{
      state_b_getter_a
    }}</p>
  <p><span><b>state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"]: </b></span>{{
      state_a_getter_b
    }}</p>
  <p><span><b>state_b_getter_b: (state, getters) => state.state_b + getters.getter_b: </b></span>{{ state_b_getter_b }}
  </p>
  <p><span><b>@click="mutation_a_count(100): </b></span>
    <button @click="mutation_a_count(100)">如果state_a>50 点一下state_a+100</button>
  </p>
  <p><span><b>@click="action_b_count(200): </b></span>
    <button @click="action_b_count(200)">如果state_b>50 点一下state_b+200</button>
  </p>

</template>

<script>
import {mapState, mapGetters, mapMutations, mapActions} from "vuex";

export default {
  name: "OptionsAPIView",
  // computed 用于 mapState和mapGetters
  computed: {
    // // 数组形式
    // // 映射全局state
    // ...mapState(["count", "state_a"]),  // state名称就是map后的名称，这里模块中的state是无法映射的
    // // 映射带有名称空间的state
    // ...mapState("module_b", ["state_b"]),  // 第一个参数为模块的别名
    //
    // // 映射全局Getters
    // ...mapGetters(["getter", "getter_a"]),
    // // 映射带有命名空间的Getters
    // ...mapGetters("module_b", ["getter_b"]),

    // 对象形式
    // 映射全局state和带有namespaced命名空间的state
    ...mapState({
      count: "count",
      state_a: state => state.module_a.state_a,
      // state_b: state => state.module_b.state_b
    }),
    // 指定命名空间的state映射
    ...mapState("module_b", {
      state_b: state => state.state_b
    }),

    // 映射全局Getters
    ...mapGetters({
      getter: "getter",
      getter_a: "getter_a"
    }),
    // 映射带有命名空间的Getters
    ...mapGetters("module_b", {
      getter_b: "getter_b",
    }),

    // 混合用法
    ...mapState({
      state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a,
      state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"],
    }),
    ...mapState("module_b", {
      state_b_getter_b: (state, getters) => state.state_b + getters.getter_b,
    })

  },
  methods: {
    // // 数组形式
    // // 映射全局的 mutations
    // ...mapMutations(["mutation", "mutation_a"]),
    // // 映射带有命名空间的mutations
    // ...mapMutations("module_b", ["mutation_b"]),
    // // 映射全局的 actions
    // ...mapActions(["action", "action_a"]),
    // // 映射带有命名空间的actions
    // ...mapActions("module_b", ["action_b"]),

    // 对象形式
    // 映射全局的mutations
    ...mapMutations({
      mutation: "mutation",
      mutation_a: "mutation_a",
    }),
    // 映射带有命名空间的mutations
    ...mapMutations("module_b", {
      mutation_b: "mutation_b",
    }),
    // 映射全局的actions
    ...mapActions({
      action: "action",
      action_a: "action_a"
    }),
    // 映射带有命名空间namespaced的actions
    ...mapActions("module_b", {
      action_b: "action_b"
    }),
    // 组合用法
    ...mapMutations({
      mutation_a_count: (commit, count) => commit("mutation_a", {num: count})
    }),
    ...mapActions("module_b", {
      action_b_count: (dispatch, count) => dispatch("action_b", {num: count})
    })

  }
}
</script>

<style scoped>

</style>