提交临时代码

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>

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')

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

demo/vuex-basic/store/index.js

@@ -0,0 +1,16 @@
+import {createStore} from "vuex";
+
+export default createStore({
+    state: {
+        count: 1,
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    },
+    modules: {
+
+    }
+})

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>

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>

src/store/index.js

@@ -2,15 +2,15 @@ import {createStore} from "vuex";
 
 export default createStore({
     state: {
-        count: 1,
+        count: 2,
     },
-    mutations: {
+    getters: {
-
+        // getter使用箭头函数来定义，默认必传参数时state，如果需要其余参数，可以使用嵌套头函数
-    },
+        doubleCount: (state) => {
-    actions: {
+            return state.count * 2
-
         },
-    modules: {
+        moreCount: (state) => (n) => {
-
+            return state.count * n
+        }
     }
 })

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>
 

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 () {
+    halfCount: function () {
-      return this.$store.state.count
+      return this.$store.state.count * 0.5
     }
   }
 }