From 21e13ae5d79ee77e0701d69a1ac0ac02512840bc Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Sun, 5 Jan 2025 11:27:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E7=BB=84=E5=90=88=E5=BC=8F?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 skills/web/vue-project/package-lock.json      | 39 +++++++++++++++++++
 skills/web/vue-project/package.json           |  1 +
 skills/web/vue-project/src/App.vue            |  2 +
 skills/web/vue-project/src/stores/counter.js  |  3 ++
 .../web/vue-project/src/views/AboutView.vue   |  5 +++
 5 files changed, 50 insertions(+)

diff --git a/skills/web/vue-project/package-lock.json b/skills/web/vue-project/package-lock.json
index e5e1d2d..94669ec 100644
--- a/skills/web/vue-project/package-lock.json
+++ b/skills/web/vue-project/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
+        "@vueuse/core": "^12.3.0",
         "pinia": "^2.3.0",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -1524,6 +1525,11 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -1772,6 +1778,39 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.13.tgz",
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-12.3.0.tgz",
+      "integrity": "sha512-cnV8QDKZrsyKC7tWjPbeEUz2cD9sa9faxF2YkR8QqNwfofgbOhmfIgvSYmkp+ttSvfOw4E6hLcQx15mRPr0yBA==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "12.3.0",
+        "@vueuse/shared": "12.3.0",
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-12.3.0.tgz",
+      "integrity": "sha512-M/iQHHjMffOv2npsw2ihlUx1CTiBwPEgb7DzByLq7zpg1+Ke8r7s9p5ybUWc5OIeGewtpY4Xy0R2cKqFqM8hFg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-12.3.0.tgz",
+      "integrity": "sha512-X3YD35GUeW0d5Gajcwv9jdLAJTV2Jdb/Ll6Ii2JIYcKLYZqv5wxyLeKtiQkqWmHg3v0J0ZWjDUMVOw2E7RCXfA==",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.14.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.14.0.tgz",
diff --git a/skills/web/vue-project/package.json b/skills/web/vue-project/package.json
index 88e00fe..03f3948 100644
--- a/skills/web/vue-project/package.json
+++ b/skills/web/vue-project/package.json
@@ -13,6 +13,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@vueuse/core": "^12.3.0",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
diff --git a/skills/web/vue-project/src/App.vue b/skills/web/vue-project/src/App.vue
index f999b40..67a02a3 100644
--- a/skills/web/vue-project/src/App.vue
+++ b/skills/web/vue-project/src/App.vue
@@ -2,6 +2,7 @@
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
 import { provide, ref } from 'vue';
+import {app} from '@/stores/counter'
 
 const title = ref('You did it')
 
@@ -27,6 +28,7 @@ provide('username', username)
       <!-- <component></component> -->
       <hr>
       <input style="width: 400px;" v-model="username" type="text">
+      <input style="width: 400px;" v-model="app.role" type="text">
       <nav>
           <RouterLink to="/">Home</RouterLink>
           <RouterLink to="/about">About</RouterLink>
diff --git a/skills/web/vue-project/src/stores/counter.js b/skills/web/vue-project/src/stores/counter.js
index b6757ba..5906388 100644
--- a/skills/web/vue-project/src/stores/counter.js
+++ b/skills/web/vue-project/src/stores/counter.js
@@ -1,5 +1,6 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
+import { useStorage } from '@vueuse/core'
 
 export const useCounterStore = defineStore('counter', () => {
   const count = ref(0)
@@ -10,3 +11,5 @@ export const useCounterStore = defineStore('counter', () => {
 
   return { count, doubleCount, increment }
 })
+
+export const app =  useStorage('app', {username: "will", role: 'admin'}, localStorage, { mergeDefaults: true })
diff --git a/skills/web/vue-project/src/views/AboutView.vue b/skills/web/vue-project/src/views/AboutView.vue
index bc195b4..a73625c 100644
--- a/skills/web/vue-project/src/views/AboutView.vue
+++ b/skills/web/vue-project/src/views/AboutView.vue
@@ -25,18 +25,23 @@
 
     <input type="radio" id="blue" value="blue" v-model="picked" />
     <label for="blue">Blue</label>
+    <hr>
+    {{ app.role }}
   </div>
 </template>
 
 <script setup>
 
 import { nextTick, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from 'vue';
+import {app} from '@/stores/counter'
 
 // wrap 'test' --> {value: 'test'}
 // model ---> view
 const pageName = ref('test2')
 console.log(pageName.value)
 
+
+
 // view ---> model
 // form 表单
 // data ---> api