vuex临时代码

src/store/index.js

@@ -12,5 +12,11 @@ export default createStore({
         moreCount: (state) => (n) => {
             return state.count * n
         }
+    },
+    mutations: {
+        // payload用于携带参数
+        increment(state, payload) {
+            state.count += payload.num
+        }
     }
 })

src/views/CompositionAPIView.vue

@@ -1,17 +1,36 @@
 <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>
 </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})
+}
 
 </script>
 

src/views/OptionsAPIView.vue

@@ -1,17 +1,40 @@
 <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>
 </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
+      })
+    }
   }
 }
 </script>