预测试

一个全局计数器的写法

原理：Pinia

1 定义一个store,我命名其为couter

在有Pinia的项目的src中创建一个stores/counter.js

import { ref, computed } from 'vue'  
import { defineStore } from 'pinia'  
export const useCounterStore = defineStore('counter', () => {  
  const count = ref(5)//初始值  
  // 定义属性doubleCount，它的值是count的值乘以2  
  const doubleCount = computed(() => count.value * 2)  
  function increment() {  
    count.value++//执行的操作  
  }  

  return { count, doubleCount, increment }  
})  

2 在vue文件中引入该store

App.vue

import { RouterLink, RouterView } from 'vue-router'  

import { useCounterStore } from '@/stores/counter'  
const counter = useCounterStore()  
</script>  

<template>  
  <div>Current Count: {{ counter.count }}</div>  
  <button @click="counter.increment">主页面的按钮</button>  
  <RouterLink to="/">Home</RouterLink>  
  <RouterView />  
</template>  子页面.vue  <script setup>  
import { useCounterStore } from '@/stores/counter'  
const counter = useCounterStore()  
</script>  
<template>  
  <main>  
    <div>Current Count: {{ counter.count }}</div>  
    <button @click="counter.increment">子页面的按钮</button>  
  </main>  
</template>  

自此,这两个按钮点击后都会改变counter.count的值

vue的数据监测 watch

watch: {  
  count(newcount, oldcount) {  
    if (true) {  
      console.log("变化前的值：", newcount, "变化后的值：", oldcount);  
    }  
  },  
},  

指路：

uiverse.io很多css控件的设计师网站
Ant Design Vue
Pinia 符合直觉的 Vue.js 状态管理库
Vue Router Vue.js 的官方路由