feature:先学一点，明天学demo，学完自己练个手就差不多了

src/components/HelloWorld.vue

@@ -1,61 +1,37 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
+    <div>{{ mainStore.count }}</div>
+    <hr>
+    <div>{{ count }}</div>
+    <div>{{ foo }}</div>
+    <div>{{ count10 }}</div>
+    <hr>
+    <button @click="updateCount">更新数据</button>
 </template>
+<script lang="ts" setup>
+import { userMainStore } from "@/store";
+import { storeToRefs } from "pinia";
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+const mainStore = userMainStore()
+console.log(mainStore.count)
 
-export default defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-});
+// 直接结构的值 会丧失响应式
+// const {count } = mainStore
+// 使用pinia提供的解构方法
+const { count, foo, count10 } = storeToRefs(mainStore)
+const updateCount = () => {
+    // 方式1 直接修改
+    // mainStore.count++
+    // 方式2 $patch 批量更新
+    // mainStore.$patch({
+    //     count: mainStore.count++,
+    //     foo: mainStore.foo + '='
+    // })
+    // 方式3 $patch 传递一个函数
+    // mainStore.$patch(state => {
+    //     state.count++;
+    //     state.foo += '='
+    // })
+    // 方式4 调用action中的方法
+    mainStore.changeState()
+}
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>