补充组合式函数

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",

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"

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>

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 })

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