diff --git a/入门/cli/hello-cli/public/css/app.css b/入门/cli/hello-cli/public/css/page.css
similarity index 100%
rename from 入门/cli/hello-cli/public/css/app.css
rename to 入门/cli/hello-cli/public/css/page.css
diff --git a/入门/cli/hello-cli/public/index.html b/入门/cli/hello-cli/public/index.html
index dc96d47..fc65a6d 100644
--- a/入门/cli/hello-cli/public/index.html
+++ b/入门/cli/hello-cli/public/index.html
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-22 17:50:49
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 15:28:38
+ * @LastEditTime: 2022-11-29 17:46:54
  * @FilePath: \hello-cli\public\index.html
  * @Description: 
  * 
@@ -18,11 +18,11 @@
         <title><%= htmlWebpackPlugin.options.title %></title>
         <link rel="stylesheet" href="<%= BASE_URL %>css/root.css" />
         <link rel="stylesheet" href="<%= BASE_URL %>css/normalize.css" />
-        <link rel="stylesheet" href="<%= BASE_URL %>css/app.css" />
+        <link rel="stylesheet" href="<%= BASE_URL %>css/page.css" />
     </head>
     <style>
         .v-cloak {
-            display: none;
+            /* display: none; */
         }
     </style>
     <body>
diff --git a/入门/cli/hello-cli/src/App.vue b/入门/cli/hello-cli/src/App.vue
index 8c814ef..6b1f352 100644
--- a/入门/cli/hello-cli/src/App.vue
+++ b/入门/cli/hello-cli/src/App.vue
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-22 17:50:49
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 13:25:47
+ * @LastEditTime: 2022-11-29 17:50:22
  * @FilePath: \hello-cli\src\App.vue
  * @Description: 
  * 
@@ -10,9 +10,11 @@
 -->
 <template>
   <div class="content">
-    <App1></App1>
-    <App2></App2>
+    <h1>学习vuex</h1>
+    <div><App1></App1> <App2></App2></div>
+    <el-button type="warning" @click="onClearCount">清零</el-button>
   </div>
+  <hr />
 </template>
 
 <script>
@@ -25,15 +27,23 @@ export default {
     App1,
     App2,
   },
+  methods: {
+    onClearCount() {
+      this.$store.commit("clearCount");
+    },
+  },
 };
 </script>
 
 <style>
 #app {
+  background-color: #f4f5f7;
+}
+.content {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: #f4f5f7;
   width: 40rem;
   margin: 0px auto;
   border-radius: 5px;
@@ -47,4 +57,9 @@ export default {
 #app div > * + * {
   margin-left: 1rem;
 }
+
+hr {
+  width: 100%;
+  border: 1px solid 1px;
+}
 </style>
diff --git a/入门/cli/hello-cli/src/components/vuex/App1.vue b/入门/cli/hello-cli/src/components/vuex/App1.vue
index 1f6a2d1..add6be6 100644
--- a/入门/cli/hello-cli/src/components/vuex/App1.vue
+++ b/入门/cli/hello-cli/src/components/vuex/App1.vue
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-29 11:36:29
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 15:26:38
+ * @LastEditTime: 2022-11-29 15:51:01
  * @FilePath: \hello-cli\src\components\vuex\App1.vue
  * @Description: 
  * 
@@ -10,12 +10,14 @@
 -->
 <template>
   <div class="container">
-    <h1>计数器一：{{ this.$store.state.count }}</h1>
+    <h1>计数器一：{{ storeCount }}</h1>
     <el-button type="primary" v-on:click="addCount()">更新计数器</el-button>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "App-1",
   data() {
@@ -28,6 +30,9 @@ export default {
       this.$store.commit("increment");
     },
   },
+  computed: mapState({
+    storeCount: "count",
+  }),
 };
 </script>
 <style scoped>
diff --git a/入门/cli/hello-cli/src/components/vuex/App2.vue b/入门/cli/hello-cli/src/components/vuex/App2.vue
index 243fa6c..57ecc95 100644
--- a/入门/cli/hello-cli/src/components/vuex/App2.vue
+++ b/入门/cli/hello-cli/src/components/vuex/App2.vue
@@ -1,8 +1,9 @@
+<!-- eslint-disable no-unused-vars -->
 <!--
  * @Author: Kane
  * @Date: 2022-11-29 13:10:21
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 15:29:07
+ * @LastEditTime: 2022-11-29 16:07:22
  * @FilePath: \hello-cli\src\components\vuex\App2.vue
  * @Description: 
  * 
@@ -10,12 +11,15 @@
 -->
 <template>
   <div class="container">
-    <h1>计数器二：{{ this.$store.state.count }}</h1>
+    <h1>计数器二：{{ this.$store.getters.countText }}</h1>
     <el-button type="danger" v-on:click="addCount()">更新计数器</el-button>
   </div>
 </template>
 
 <script>
+//引入mapState
+//import { mapState } from "vuex";
+
 export default {
   name: "App-2",
   data() {
@@ -28,6 +32,11 @@ export default {
       this.$store.commit("increment");
     },
   },
+  computed: {
+    storeCount() {
+      return this.$store.state.count;
+    },
+  },
 };
 </script>
 <style scoped>
diff --git a/入门/cli/hello-cli/src/main.js b/入门/cli/hello-cli/src/main.js
index 832b135..4d2ccf3 100644
--- a/入门/cli/hello-cli/src/main.js
+++ b/入门/cli/hello-cli/src/main.js
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-22 17:50:49
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 15:23:25
+ * @LastEditTime: 2022-11-29 16:14:35
  * @FilePath: \hello-cli\src\main.js
  * @Description: 
  * 
@@ -24,8 +24,16 @@ const vuex = createStore({
     mutations: {
         increment(state) {
             state.count++;
+        },
+        clearCount(state) {
+            state.count = 0;
         }
-    }
+    },
+    getters: {
+        countText(store) {
+            return store.count + "次";
+        },
+    },
 });
 app.use(vuex);
 app.use(ElementPlus);
