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

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

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

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

<script>
export default {
  name: "OptionsAPIView",

  methods: {
    // 根store的mutation操作
    root_mutation: function () {
      this.$store.commit('mutation', {num: 7})
    },
    // moduleA的mutation操作
    moduleA_mutation: function () {
      this.$store.commit('mutation_a', {num: 8})
    },
    // moduleB的mutation操作
    moduleB_mutation: function () {
      this.$store.commit('module_b/mutation_b', {num: 9})
    },
    // 根store的action操作
    root_action: function () {
      this.$store.dispatch('action', {num: 7})
    },
    // moduleA的action操作
    moduleA_action: function () {
      this.$store.dispatch('action_a', {num: 8})
    },
    // moduleB的action操作
    moduleB_action: function () {
      this.$store.dispatch('module_b/action_b', {num: 9})
    }
  }
}
</script>

<style scoped>

</style>
