From f029dffb442cdbc36daf17fbf8dafc8b9accff3d Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Wed, 20 Sep 2023 18:30:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=B8=B4=E6=97=B6=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/vuex-basic/App.vue                      | 13 ++++++++
 demo/vuex-basic/main.js                      |  6 ++++
 demo/vuex-basic/router/index.js              | 32 ++++++++++++++++++++
 demo/vuex-basic/store/index.js               | 16 ++++++++++
 demo/vuex-basic/views/CompositionAPIView.vue | 17 +++++++++++
 demo/vuex-basic/views/OptionsAPIView.vue     | 18 +++++++++++
 src/store/index.js                           | 18 +++++------
 src/views/CompositionAPIView.vue             |  7 +++--
 src/views/OptionsAPIView.vue                 |  9 ++++--
 9 files changed, 122 insertions(+), 14 deletions(-)
 create mode 100644 demo/vuex-basic/App.vue
 create mode 100644 demo/vuex-basic/main.js
 create mode 100644 demo/vuex-basic/router/index.js
 create mode 100644 demo/vuex-basic/store/index.js
 create mode 100644 demo/vuex-basic/views/CompositionAPIView.vue
 create mode 100644 demo/vuex-basic/views/OptionsAPIView.vue

diff --git a/demo/vuex-basic/App.vue b/demo/vuex-basic/App.vue
new file mode 100644
index 0000000..2ab91da
--- /dev/null
+++ b/demo/vuex-basic/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>
diff --git a/demo/vuex-basic/main.js b/demo/vuex-basic/main.js
new file mode 100644
index 0000000..225b6e1
--- /dev/null
+++ b/demo/vuex-basic/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')
diff --git a/demo/vuex-basic/router/index.js b/demo/vuex-basic/router/index.js
new file mode 100644
index 0000000..619eba5
--- /dev/null
+++ b/demo/vuex-basic/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
diff --git a/demo/vuex-basic/store/index.js b/demo/vuex-basic/store/index.js
new file mode 100644
index 0000000..e1eb208
--- /dev/null
+++ b/demo/vuex-basic/store/index.js
@@ -0,0 +1,16 @@
+import {createStore} from "vuex";
+
+export default createStore({
+    state: {
+        count: 1,
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    },
+    modules: {
+
+    }
+})
diff --git a/demo/vuex-basic/views/CompositionAPIView.vue b/demo/vuex-basic/views/CompositionAPIView.vue
new file mode 100644
index 0000000..f091a1d
--- /dev/null
+++ b/demo/vuex-basic/views/CompositionAPIView.vue
@@ -0,0 +1,17 @@
+<template>
+  <h3>{{ handleCount }}</h3>
+</template>
+
+<script setup>
+import {computed} from "vue";
+import {useStore} from "vuex";
+
+const store = useStore()
+
+const handleCount = computed(() => store.state.count);
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/demo/vuex-basic/views/OptionsAPIView.vue b/demo/vuex-basic/views/OptionsAPIView.vue
new file mode 100644
index 0000000..7da54aa
--- /dev/null
+++ b/demo/vuex-basic/views/OptionsAPIView.vue
@@ -0,0 +1,18 @@
+<template>
+  <h3>{{handleCount}}</h3>
+</template>
+
+<script>
+export default {
+  name: "OptionsAPIView",
+  computed: {
+    handleCount: function () {
+      return this.$store.state.count
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/store/index.js b/src/store/index.js
index e1eb208..4f8f73b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,15 +2,15 @@ import {createStore} from "vuex";
 
 export default createStore({
     state: {
-        count: 1,
+        count: 2,
     },
-    mutations: {
-
-    },
-    actions: {
-
-    },
-    modules: {
-
+    getters: {
+        // getter使用箭头函数来定义，默认必传参数时state，如果需要其余参数，可以使用嵌套头函数
+        doubleCount: (state) => {
+            return state.count * 2
+        },
+        moreCount: (state) => (n) => {
+            return state.count * n
+        }
     }
 })
diff --git a/src/views/CompositionAPIView.vue b/src/views/CompositionAPIView.vue
index f091a1d..81eca08 100644
--- a/src/views/CompositionAPIView.vue
+++ b/src/views/CompositionAPIView.vue
@@ -1,5 +1,8 @@
 <template>
-  <h3>{{ handleCount }}</h3>
+  <p><span><b>store.state.count: </b></span>{{ store.state.count }}</p>
+  <p><span><b>调用computed(halfCount): </b></span>{{ halfCount }}</p>
+  <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>
 </template>
 
 <script setup>
@@ -8,7 +11,7 @@ import {useStore} from "vuex";
 
 const store = useStore()
 
-const handleCount = computed(() => store.state.count);
+const halfCount = computed(() => store.state.count * 0.5);
 
 </script>
 
diff --git a/src/views/OptionsAPIView.vue b/src/views/OptionsAPIView.vue
index 7da54aa..9dcdb48 100644
--- a/src/views/OptionsAPIView.vue
+++ b/src/views/OptionsAPIView.vue
@@ -1,13 +1,16 @@
 <template>
-  <h3>{{handleCount}}</h3>
+  <p><span><b>this.$store.state.count: </b></span>{{ this.$store.state.count }}</p>
+  <p><span><b>调用computed(halfCount): </b></span>{{ halfCount }}</p>
+  <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>
 </template>
 
 <script>
 export default {
   name: "OptionsAPIView",
   computed: {
-    handleCount: function () {
-      return this.$store.state.count
+    halfCount: function () {
+      return this.$store.state.count * 0.5
     }
   }
 }