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

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

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

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

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

<script setup>
import {useStore} from "vuex";

// 实例化useStore对象
const store = useStore()

// 根store的mutation操作
const root_mutation = () => {
  store.commit('mutation', {num: 7})
}

// moduleA的mutation操作
const moduleA_mutation = () => {
  store.commit('mutation_a', {num: 8})
}

// moduleB的mutation操作
const moduleB_mutation = () => {
  store.commit('module_b/mutation_b', {num: 9})
}

// 根store的action操作
const root_action = () => {
  store.dispatch('action', {num: 7})
}

// moduleA的action操作
const moduleA_action = () => {
  store.dispatch('action_a', {num: 8})
}

// moduleB的action操作
const moduleB_action = () => {
  store.dispatch('module_b/action_b', {num: 9})
}

</script>

<style scoped>

</style>