vuex的基本应用示例

package-lock.json

@@ -11,7 +11,8 @@
         "core-js": "^3.8.3",
         "element-plus": "^2.3.12",
         "vue": "^3.2.13",
-        "vue-router": "^4.0.3"
+        "vue-router": "^4.0.3",
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -10640,6 +10641,17 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -11,7 +11,8 @@
     "core-js": "^3.8.3",
     "element-plus": "^2.3.12",
     "vue": "^3.2.13",
-    "vue-router": "^4.0.3"
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <router-link :to="{name:'home'}">home</router-link>
+    <router-link :to="{name:'options'}">OptionsAPI</router-link>
     |
-    <router-link :to="{name:'user'}">users</router-link>
+    <router-link :to="{name:'composition'}">CompositionAPI</router-link>
   </div>
   <div>
     <router-view></router-view>

src/components/User/ChangeUser.vue

@@ -1,14 +0,0 @@
-<template>
-  <h3>这是ChangeUser</h3>
-</template>
-
-<script>
-export default {
-  name: "ChangeUser"
-}
-</script>
-
-
-<style scoped>
-
-</style>

src/components/User/UserInfo.vue

@@ -1,14 +0,0 @@
-<template>
-  <h3>这是UserInfo</h3>
-</template>
-
-<script>
-export default {
-  name: "UserInfo"
-}
-</script>
-
-
-<style scoped>
-
-</style>

src/main.js

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

src/router/index.js

@@ -1,47 +1,24 @@
 // 引入必要的router组件
 import {createRouter, createWebHistory} from 'vue-router'
 // 引入视图
-const Home = () => import('../views/Home/Home.vue')
+const OptionsAPI = () => import('../views/OptionsAPIView.vue')
-const UserIndex = () => import('../views/User/UserIndex.vue')
+const CompositionAPI = () => import('../views/CompositionAPIView.vue')
 
 // 引入组件
-const change_user = () => import('../components/User/ChangeUser.vue')
-const user_info = () => import('../components/User/UserInfo.vue')
 
-// 创建路由，如果同一个路由中包含多个组件，则将component改名为components（加s），已对像的形式加添加多个组件，对象中的key是对象的名称， 可以在视图中使用此名称指定组件
+
+// 创建路由
 const routes = [
     {
-        path: '/',
+        path: '/options',
-        name: 'home',
+        name: 'options',
-        component: Home
+        component: OptionsAPI
     },
     {
-        path: '/user',
+        path: '/composition',
-        name: 'user',
+        name: 'composition',
-        component: UserIndex,
+        component: CompositionAPI
-        // redirect 设置默认显示的页面
-        redirect: '/user/info',
-        // 定义嵌套路由, 子路径不要加'/'，加了'/' 请求路径是/info，不加的请求是/user/info
-        children: [
-            {
-                path: 'info',
-                name: 'info',
-                component: user_info,
-            },
-            {
-                path: 'change',
-                name: 'change',
-                component: change_user,
-            }
-        ]
     },
-    {
-        // 如果你省略了最后一个' * '，参数中的' / '字符将在解析或推入时被编码
-        // 最后一个*，它意味着重复的参数，如果您打算使用它的名称直接导航到未找到的路由，那么这是必要的
-        path:"/:pathMatch(.*)*",
-        name:'notfound',
-        component: ()=>import('../views/Error/PageNotFound.vue')
-    }
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/store/index.js

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

src/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>

src/views/Error/PageNotFound.vue

@@ -1,13 +0,0 @@
-<template>
-  <h1>Page not found</h1>
-</template>
-
-<script>
-export default {
-  name: "PageNotFound"
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/Home/Home.vue

@@ -1,14 +0,0 @@
-<template>
-  <h1>这是Home</h1>
-</template>
-
-<script>
-export default {
-  name: "Home"
-}
-</script>
-
-
-<style scoped>
-
-</style>

src/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/views/User/UserIndex.vue

@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <ul>
-      <li>
-        <router-link :to="{name:'info'}">个人信息</router-link>
-      </li>
-      <li>
-        <router-link :to="{name:'change'}">用户设置</router-link>
-      </li>
-    </ul>
-  </div>
-  <div>
-    <router-view/>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UserIndex"
-}
-</script>
-
-
-<style scoped>
-
-</style>