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

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

<script>
export default {
  name: "OptionsAPIView",
  // 通过computed来映射state数据
  computed: {
    halfCount: function () {
      return this.$store.state.count * 0.5
    }
  },
  methods: {
    // 属性形式订阅mutations
    inc: function () {
      this.$store.commit('increment', {num: 7})
    },
    // 对象形式订阅mutations， type是mutations的名称
    inc2: function () {
      this.$store.commit({
        type: "increment",
        num: 5
      })
    },
    inc_action1: function () {
      this.$store.dispatch('inc_actions', {num: 7})
    },
    inc_action2: function () {
      this.$store.dispatch({type: 'inc_actions', num: 5})
    }
  }
}
</script>

<style scoped>

</style>