feat: 增加vuex

package.json

@@ -8,7 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.0",
@@ -16,4 +17,4 @@
     "vite": "^2.9.0",
     "vue-tsc": "^0.29.8"
   }
-}
+}

src/App.vue

@@ -3,21 +3,28 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-12 17:58:56
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-12 19:17:32
+ * @lastEditTime: 2022-04-13 17:07:52
  * @FilePath: \toy_box_website\src\App.vue
 -->
 <template>
     <img alt="Vue logo" src="./assets/logo.png" />
     <HelloWorldVue msg="Hello Vue 3 + TypeScript + Vite" />
+    <span>新使用的 store : {{ appName }}</span>
 </template>
 
 <script lang="ts">
 import HelloWorldVue from "./components/HelloWorld.vue";
+import store from "./store";
 
 export default {
     components: {
         HelloWorldVue,
     },
+    computed: {
+        appName(): string {
+            return store.state.appName;
+        },
+    },
 };
 </script>
 

src/main.ts

@@ -1,4 +1,13 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+/**
+ * @description:
+ * @Author: uray(1109489444@qq.com)
+ * @date: 2022-04-12 17:58:56
+ * @lastEditors: uray(1109489444@qq.com)
+ * @lastEditTime: 2022-04-13 17:06:02
+ * @FilePath: \toy_box_website\src\main.ts
+ */
+import { createApp } from "vue";
+import App from "./App.vue";
+import store from "./store";
 
-createApp(App).mount('#app')
+createApp(App).use(store).mount("#app");

src/store/index.ts

@@ -0,0 +1,28 @@
+/**
+ * @description:
+ * @Author: uray(1109489444@qq.com)
+ * @date: 2022-04-13 17:03:49
+ * @lastEditors: uray(1109489444@qq.com)
+ * @lastEditTime: 2022-04-13 17:08:36
+ * @FilePath: \toy_box_website\src\store\index.ts
+ */
+import { createStore } from "vuex";
+
+interface IState {
+    appName: string;
+}
+// 创建一个新的 store 实例
+const store = createStore({
+    state() {
+        return {
+            appName: "欧气潮玩",
+        };
+    },
+    mutations: {
+        reName(state: IState, newName: string) {
+            state.appName = newName;
+        },
+    },
+});
+
+export default store;

yarn.lock

@@ -153,6 +153,11 @@
     "@vue/compiler-dom" "3.2.32"
     "@vue/shared" "3.2.32"
 
+"@vue/devtools-api@^6.0.0-beta.11":
+  version "6.1.4"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
+  integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
+
 "@vue/reactivity-transform@3.2.32":
   version "3.2.32"
   resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.32.tgz#974fd2a1e682e962fbc5840be8432ac4ab8650d3"
@@ -918,6 +923,13 @@ vue@^3.2.25:
     "@vue/server-renderer" "3.2.32"
     "@vue/shared" "3.2.32"
 
+vuex@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
+  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
+
 with@^7.0.0:
   version "7.0.2"
   resolved "https://registry.npmmirror.com/with/-/with-7.0.2.tgz#ccee3ad542d25538a7a7a80aad212b9828495bac"