完成了vuex中的state，getters，mutations和actions的学习

demo/vuex-state-getters-mutations-actions/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <router-link :to="{name:'options'}">OptionsAPI</router-link>
+    |
+    <router-link :to="{name:'composition'}">CompositionAPI</router-link>
+  </div>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+<script setup>
+
+</script>

demo/vuex-state-getters-mutations-actions/main.js

@@ -0,0 +1,6 @@
+import {createApp} from "vue";
+import App from "./App.vue"
+import router from './router'
+import store from './store'
+
+createApp(App).use(router).use(store).mount('#app')

demo/vuex-state-getters-mutations-actions/router/index.js

@@ -0,0 +1,32 @@
+// 引入必要的router组件
+import {createRouter, createWebHistory} from 'vue-router'
+// 引入视图
+const OptionsAPI = () => import('../views/OptionsAPIView.vue')
+const CompositionAPI = () => import('../views/CompositionAPIView.vue')
+
+// 引入组件
+
+
+// 创建路由
+const routes = [
+    {
+        path: '/options',
+        name: 'options',
+        component: OptionsAPI
+    },
+    {
+        path: '/composition',
+        name: 'composition',
+        component: CompositionAPI
+    },
+]
+
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导出路由
+export default router

demo/vuex-state-getters-mutations-actions/store/index.js

@@ -0,0 +1,34 @@
+import {createStore} from "vuex";
+
+export default createStore({
+    state: {
+        count: 2,
+    },
+    getters: {
+        // getter使用箭头函数来定义，默认必传参数时state，如果需要其余参数，可以使用嵌套头函数
+        doubleCount: (state) => {
+            return state.count * 2
+        },
+        moreCount: (state) => (n) => {
+            return state.count * n
+        }
+    },
+    mutations: {
+        // payload用于携带参数
+        increment(state, payload) {
+            state.count += payload.num
+        }
+    },
+    actions: {
+        inc_actions(content, payload) {
+            // 模拟异步操作
+            setTimeout(() => {
+                // rep 模拟axios请求返回的数据
+                const rep = 3;
+                if (content.state.count > 50) {
+                    content.commit('increment', {num: rep+payload.num});
+                }
+            }, 1000)
+        }
+    }
+})

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

@@ -0,0 +1,53 @@
+<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>

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

@@ -0,0 +1,57 @@
+<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>

src/store/index.js

@@ -18,5 +18,17 @@ export default createStore({
         increment(state, payload) {
             state.count += payload.num
         }
+    },
+    actions: {
+        inc_actions(content, payload) {
+            // 模拟异步操作
+            setTimeout(() => {
+                // rep 模拟axios请求返回的数据
+                const rep = 3;
+                if (content.state.count > 50) {
+                    content.commit('increment', {num: rep+payload.num});
+                }
+            }, 1000)
+        }
     }
 })

src/views/CompositionAPIView.vue

@@ -12,6 +12,13 @@
   <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>
@@ -31,6 +38,13 @@ const inc = () => {
 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>
 

src/views/OptionsAPIView.vue

@@ -12,6 +12,13 @@
   <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>
@@ -34,6 +41,12 @@ export default {
         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})
     }
   }
 }