vue3_element_demo1/demo/vuex-state-getters-mutations-actions/views/CompositionAPIView.vue

<template>
  <!-- 对state的操作 -->
  <p><span><b>store.state.count: </b></span>{{ store.state.count }}</p>
  <p><span><b>调用computed(halfCount): </b></span>{{ halfCount }}</p>
  <!-- 对getters的操作，分为无参和传参 -->
  <p><span><b>store.getters.doubleCount: </b></span>{{ store.getters.doubleCount }}</p>
  <p><span><b>store.getters.moreCount(10): </b></span>{{ store.getters.moreCount(10) }}</p>
  <!-- 对mutations的操作 -->
  <p><span><b>store.commit('increment', {num: 7}): </b></span>
    <button @click="inc">点一下count+7</button>
  </p>
  <p><span><b>store.commit({type: "increment", num: 5}): </b></span>
    <button @click="inc2">点一下count+5</button>
  </p>
  <!-- 对actions的操作 -->
  <p><span><b>store.commit({type: "increment", num: 5}): </b></span>
    <button @click="inc_action1">如果count>50 点一下count+10</button>
  </p>
  <p><span><b>store.dispatch({type: 'inc_actions', num: 5}): </b></span>
    <button @click="inc_action2">如果count>50 点一下count+8</button>
  </p>
</template>

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

// 实例化useStore对象
const store = useStore()
// 本地方法中调用vuex
const halfCount = computed(() => store.state.count * 0.5);
// 属性方式映射vuex中的mutations，必须使用commit方法订阅mutations
// 属性形式订阅mutations
const inc = () => {
  store.commit('increment', {num: 7})
}
// 对象形式订阅mutations， type是mutations的名称
const inc2 = () => {
  store.commit({type: "increment", num: 5})
}
const inc_action1 = () => {
  store.dispatch('inc_actions', {num: 7})
}

const inc_action2 = () => {
  store.dispatch({type: 'inc_actions', num: 5})
}

</script>

<style scoped>

</style>