预测试

一个全局计数器的写法

原理：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

<script setup>
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>
<script>

</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 的官方路由