Vue3 + Vite 高级编程总结一

紫藤庄园2025年1月10日...大约 21 分钟

Vue3 + Vite 高级编程总结一

基础编程

安装 Nodejs

到官网下载 nodejs 并安装。版本要求：18.0+，https://nodejs.cn/。

配置国内镜像

国内加速镜像

官方国内镜像：npm config set registry https://r.cnpmjs.org/
官方镜像：npm config set registry https://registry.npmjs.org/
淘宝镜像：npm config set registry https://registry.npmmirror.com/
华为云镜像：npm config set registry https://mirrors.huaweicloud.com/repository/npm/
腾讯云镜像：npm config set registry https://mirrors.cloud.tencent.com/npm/
中国科学技术大学：npm config set registry https://npmreg.proxy.ustclug.org/
网易镜像：npm config set registry https://mirrors.163.com/npm/
阿里云镜像：npm config set registry https://npm.aliyun.com/

使用基于 webpack 的 @vue/cli 创建 vue3 项目

先检查 @vue/cli 版本，确保 @vue/cli 版本必须是 4.5.0 以上。

D:\javascriptedu>vue -V
@vue/cli 5.0.8

D:\javascriptedu>vue --version
@vue/cli 5.0.8

版本不对或者未安装，需要先安装 cli。
```
D:\javascriptedu>npm install @vue/cli
```

创建 vue3 项目

D:\javascriptedu>vue create vue3_test
... ...
$ cd vue3_test
$ pnpm run serve

启动 vue3 项目

D:\javascriptedu>cd vue3_test

D:\javascriptedu\vue3_test>pnpm run serve
  ......
  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.3.100:8081/

浏览器中输入：http://localhost:8081/

使用 vite 创建 vue3 项目

构建工具：grunt 、gulp 、webpack。这三种目前市场上最火的是 webpack 构建工具。下一代构建工具 vite 特点如下：

开发环境无需打包操作，可以快速冷启动。
轻量快速的热重载 HMR。
真正的按需编译，不再等待整个应用编译完成。

npm create vite@latest vue3_test_vite --template vue-ts

C:\Users\Aaron>npm create vite@latest vue3_test_vite

C:\Users\Aaron>cd vue3_test_vite

C:\Users\Aaron\vue3_test_vite>npm install

C:\Users\Aaron\vue3_test_vite>npm run dev
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

浏览器中输入：http://localhost:5173/

安装开发者工具

chrome 网上应用店安装。可能需要梯子吧。
离线安装：vue3_dev_tools.crx 拖拽进浏览器扩展工具面板中并打开开关。工具下载地址：https://ai789.site/PAP/WIN/TOOLS.html

vue vue2 技术

vue2 & vue3 语法

vue2 & vue3 语法不要混合在一起写

vue2 配置(data、methods、computed) 中可以访问到 vue3 setup 中的属性和方法，反之不成立。
vue3 和 vue2 中定义了重名的变量时，模板优先访问 vue3 中的数据。
vue2 是分散式风格,vue3 是集中式维护风格。

vue2 钩子生命周期

vue2 响应式原理

对象类型：通过 object.defineProperty() 对属性的读取、修改进行拦截。
数组类型：通过重写更新数组的一系列方法来实现拦截。
存在问题：新增属性、删除属性，界面不会自动更新。直接通过下标修改数组，界面不会自动更新。

问题解决方案如下：

methods:{
  //新增属性
  addProperty(){
    this.$set(this.person,"sex","女")
    //或者
    Vue.(this.person,"sex","女")
  },
  //删除属性
  deleteProperty(){
    this.$delete(this.person,"name")
    //或者
    Vue.delete(this.person,"name")
  },
  //修改下标为0的数组元素值
  updateArray(){
    this.$set(this.person.hobby,0,"逛街")
    //或者
    Vue.(this.person.hobby,0,"逛街")
    //或者
    this.person.hobby.splice(0,1,"逛街")
  }
}

vue2 props 和 $attrs

props 声明变量，变量就挂载在 VC 身上。如果不声明 props, 变量就挂载在 $attrs 内部。
在 props 中的数据可以做较为详细的限制，而 $attrs 则没有。props 收到的数据都是只读的。

vue2 $slots 插槽

父组件给插槽带名字的写法 <Demo><template slot="test">xxx</template></Demo> 。
父组件给插槽带名字的第二种写法<Demo><template v-slot:test>xxx</template></Demo>。
默认插槽写法 <Demo><tag>xxx</tag></Demo>，父组件直接传递一个标签，这个节点会存储在 $slots 。
子组件挖坑写法 <slot name="test">xxx</slot> 或者 <slot></slot> 。

vue2 v-bind 语法

<h1 v-bind="{a:1,b:2}""></h1>
给元素绑定属性，相当于下面的写法：
<h1 a=1 b=2></h1>
简写如下:
<h1 :="{a:1,b:2}"></h1>

vue2 通信方式

props 可以实现父子组件、子父组件、兄弟组件之间通信。props 收到的数据都是只读的。
自定义事件可以实现父子组件通信。
全局事件总线 $bus 可以实现任意组件通信。
pubsub 插件发布订阅模式实现任意组件通信。
vuex 集中式状态管理容器，实现任意组件通信。核心概念有 state、mutations、actions、getters、modules。
ref 父组件获取子组件实例 vc ，获取子组件的响应式数据以及方法。
slot 插槽(默认插槽、具名插槽、作用域插槽)实现父子组件通信。

vue3 技术

vue3 钩子生命周期

组合式生命周期钩子写法如下：

钩子函数如果重复写了多次，那么会依次执行这些函数。重复钩子可以写一些补充逻辑。

<script>
import { ref, onBeforeMount, onMounted,
onBeforeUpdate, onUpdated, onBeforeUnmount,
onUnmounted } from 'vue'

export default {
    name: 'App',
    setup() {
      console.log("---setup-等价于beforeCreate和create------")

      let sum = ref(0)

      onBeforeMount(() => {
          console.log("---onBeforeMount1-------")
      })
      onBeforeMount(() => {
          console.log("---onBeforeMount2-------")
      })
      onMounted(() => {
          console.log("---onMounted-------")
      })
      onBeforeUpdate(() => {
          console.log("---onBeforeUpdate-------")
      })
      onUpdated(() => {
          console.log("---onUpdated-------")
      })
      onBeforeUnmount(() => {
          console.log("---onBeforeUnmount-------")
      })
      onUnmounted(() => {
          console.log("---onUnmounted-------")
      })

      return {
          sum,
      }
    }
}
</script>

vue3 响应式原理

window.Proxy(obj,{get,set,deleteProperty}),拦截对象中任意属性值的读写、添加、删除等操作。
window.Reflect(get,set,deleteProperty)，对被代理的对象进行实际操作，有自动捕获异常功能。

vue3 通信方式

defineProps 方法接收一个数组或者对象作为参数。定义属性。实现父子通信。props 收到的数据都是只读的。父给子。

const props = defineProps({属性名：类型})

defineEmits 方法接收一个数组或者对象作为参数。定义触发事件。实现事件通信。子给父。

const emits = defineEmits(["事件名称"]);

emits("事件名称", "传递过去的数据内容");

miit 插件定义一个 bus 对象，实现兄弟组件通信。兄弟间、父子间、任意。
v-model 借助 props 和 emits 也能实现父子组件数据同步业务。同一组件可以使用多个 v-model 。v-model:pageNo=xxx v-model:pageSize=yyyy 同时定义两个。这种写法相当于父组件给子组件传递两个props pageNo和pageSize并且绑定了两个事件update:pageNo,update:pageSize。还可以收集表单数据，实现数据的双向绑定。
useAttrs 类似 defineProps defineEmits ，使用身上绑定的事件和属性可以实现组件间通信。vue2 中捡漏属性。
ref 模板引用与 $parent 可以获取真实 dom 节点对象，可以获取到子组件实例 vc。配合 defineExpose 编译宏指定哪些属性和方法允许外部访问。$parent 在子组件内部获取到父组件。获取时机是在 onMounted 函数执行时。

const h1Ref = ref(null)
const comRef = ref(null)
onMounted(()=>{
  console.log(h1Ref.value) //获取到dom对象
  console.log(comRef.value)//获取到组件对象
})

<h1 ref="h1Ref">我是dom标签h1</h1>
<TestCom ref="comRef"></TestCom>

pinia 类似 vuex 集中式管理状态容器，可是实现任意组件之间通信。核心概念有 state actions getters。
slot 实现父子组件之间通信。有默认插槽、具名插槽、作用与插槽。
provide 与 inject 祖与后代组件通信。用法如下:

provide("car", car)      //祖组件用这句话给自己的后代组件传递数据
let car = inject('car')  //后代组件用这句话接收祖组件提供的数据
还可以直接传递一个方法过去。

vue3 watch 用法

watch 用法

watch 监听一个或者多个数据变化，数据发生变化时执行回调函数。它的两个参数 immediate (立即执行) 和 deep (深度监听)。immediate 时在监听函数创建时立即执行一次回调。默认是浅层监听，开启 deep 参数可以实现数据嵌套的深度监听。
当监听 reactive 数据时，无法获取到 oldValue 值。
watchEffect 可以监听函数里用到的变量。
watch 注重过程，不关注 return 结果，而 computed 则关注 return 结果。

watch 的多种写法如下：

// 监视单个 ref 简单数据类型变量
watch(sum,
      ([newSum,oldSum]) => {
      console.log(`值变化了：${newSum},${oldSum}`)
})

// 监视单个 ref 简单数据类型变量，上来立即执行一次
watch(sum,
      ([newSum,oldSum]) => {
      console.log(`值变化了：${newSum},${oldSum}`)
}，{immediate：true})

// 监视多个 ref 简单数据类型变量
watch([sum, msg],
      ([newSum,newMsg], [oldSum,oldMsg]) => {
      console.log(`sum或者msg值变化了：${newSum},${newMsg},${oldSum},${oldMsg}`)
 })

// 监视多个 reactive 变量,无法正确获取oldValue
watch(person, (newValue, oldValue) => {
  console.log(`person的值变化了!`, newValue, oldValue)
}, { immediate: true, deep: true })

 // 监视 reactive 某个属性,提升性能
 watch(
  () => person.age,
  (newValue, oldValue) => {
    console.log(`person的age值变化了!`, newValue, oldValue)
 })

// 监视多个 reactive 属性,提升性能
watch([() => person.age, () => person.name], (newValue, oldValue) => {
  console.log(`person的age和name值变化了!`, newValue, oldValue)
}, { immediate: true, deep: true })

// 监视 reactive 嵌套深的属性,必须开启deep
watch([() => person.job], (newValue, oldValue) => {
  console.log(`person的job值变化了!`, newValue, oldValue)
}, { immediate: true, deep: true })

//监视 ref person 对象时的用法。需要给对象加person.value
watch(person.value, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

//监视 ref person 对象时监视用法。需要deep=true
watch(person, (newValue, oldValue) => {
  console.log(newValue, oldValue)
}, { deep: true })

// 函数里面用到的变量都会自动监视
watchEffect(() => {
    const x1 = sum.value
    const x2 = person.job.j1.salary
    console.log("watchEffect 所指定的回调执行了")
 })

vue3 插槽语法

默认插槽

FancyButton.vue 组件

<template>
    <button class="fancy-btn">
        <slot>我是插槽的默认内容，如果你们啥也不给我，我就显示默认值哦！</slot>
    </button>
</template>

<script setup lang="ts"></script>

<style scoped></style>

Son.vue 组件

<template>
    <div class="son">
        <slot></slot>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.son {
    background-color: #e9a14f;
    padding: 20px;
    border-radius: 5px;
    margin: 10px 0;
}
</style>

SlotTest.vue 组件：父组件可以给子组件的默认插槽中仍各种各样的东西进去。

<template>
    <div class="box">
        <FancyButton>
            <span style="color: red;">按钮啊，我是调用你的父组件，见你可怜兮兮，决定给你默认插槽传点东西尝尝~</span>
            <Son>父组件把我也仍进了默认插槽，有啥办法呢。</Son>
        </FancyButton>
    </div>
</template>

<script setup lang="ts">
import FancyButton from './FancyButton.vue';
import Son from './Son.vue';
</script>

<style scoped>
.box {
    background-color: #4fe970;
    width: 400px;
    height: 600px;
    padding: 20px;
    border-radius: 5px;
    margin: 10px 0;
}
</style>

具名插槽

FancyButton.vue 组件

<template>
    <header>
        <slot name="header"></slot>
    </header>
    <button class="fancy-btn">
        <slot>我是插槽的默认内容，如果你们啥也不给我，我就显示默认值哦！</slot>
    </button>
    <footer>
        <slot name="footer"></slot>
    </footer>
</template>

SlotTest.vue 组件：v-slot:footer可以简写为#footer。当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容。如下面的 span 标签和 Son组件就是隐式内容。

<template>
    <div class="box">
        <FancyButton>
            <template v-slot:header>
                <h2 style="color: chocolate;">我是父组件，给子组件具名插槽header传了数据，请查收!</h2>
            </template>
            <span style="color: red;">按钮啊，我是调用你的父组件，见你可怜兮兮，决定给你默认插槽传点东西尝尝~</span>
            <Son>父组件把我也仍进了插槽，有啥办法呢。</Son>
            <template v-slot:footer>
                <h2 style="color:navy;">我是父组件，给子组件具名插槽footer传了数据，请查收!</h2>
            </template>
        </FancyButton>
    </div>
</template>

SlotTest.vue 组件：默认插槽其实是一个名为default的具名插槽，所以也可以写成如下形式。

<template>
    <div class="box">
        <FancyButton>
            <template v-slot:header>
                <h2 style="color: chocolate;">我是父组件，给子组件具名插槽header传了数据，请查收!</h2>
            </template>
            <template v-slot:default>
                <span style="color: red;">按钮啊，我是调用你的父组件，见你可怜兮兮，决定给你默认插槽传点东西尝尝~</span>
                <Son>父组件把我也仍进了插槽，有啥办法呢。</Son>
            </template>
            <template v-slot:footer>
                <h2 style="color:navy;">我是父组件，给子组件具名插槽footer传了数据，请查收!</h2>
            </template>
        </FancyButton>
    </div>
</template>

条件插槽

FancyButton.vue 组件：父组件不给子组件默认插槽传递内容时，即使子组件有默认内容，这个插槽也不会显示。

<template>
    <header v-if="$slots.header">
        <slot name="header"></slot>
    </header>
    <button class="fancy-btn" v-if="$slots.default">
        <slot>我是插槽的默认内容，如果你们啥也不给我，我就显示默认值哦！</slot>
    </button>
    <footer v-if="$slots.footer">
        <slot name="footer"></slot>
    </footer>
</template>

SlotTest.vue 组件：父组件不给子组件默认插槽传递内容时，这个插槽就不显示。

<template>
    <div class="box">
        <FancyButton>
            <template v-slot:header>
                <h2 style="color: chocolate;">我是父组件，给子组件具名插槽header传了数据，请查收!</h2>
            </template>
            <template v-slot:footer>
                <h2 style="color:navy;">我是父组件，给子组件具名插槽footer传了数据，请查收!</h2>
            </template>
        </FancyButton>
    </div>
</template>

动态插槽名：借用官方案例如下所示。

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

作用域插槽

SlotTest.vue 组件：默认插槽，父组件收到子组件从插槽传递过来的2个属性，使用属性数据在父组件中。

<template>
    <div class="box">
        <FancyButton>
            ... ...
            <template v-slot="slotProps">
                收到消息：{{ slotProps.content }}，收到价格：{{ slotProps.count }}元
                <br>
                <span style="color: red;">按钮啊，我是调用你的父组件，见你可怜兮兮，决定给你默认插槽传点东西尝尝~</span>
                <Son>父组件把我也仍进了插槽，有啥办法呢。</Son>
            </template>
            ... ...
        </FancyButton>
    </div>
</template>

SlotTest.vue 组件：默认插槽，props解构写法如下。

<template>
    <div class="box">
        <FancyButton>
            ... ...
            <template v-slot="{content，count}">
                收到消息：{{ content }}，收到价格：{{ count }}元
                <br>
                <span style="color: red;">按钮啊，我是调用你的父组件，见你可怜兮兮，决定给你默认插槽传点东西尝尝~</span>
                <Son>父组件把我也仍进了插槽，有啥办法呢。</Son>
            </template>
            ... ...
        </FancyButton>
    </div>
</template>

FancyButton.vue 组件：默认插槽给父组件传递2个过去。

<template>
    ... ...
    <button class="fancy-btn" v-if="$slots.default">
        <slot :content="greetMeesage" :count="10">我是插槽的默认内容，如果你们啥也不给我，我就显示默认值哦！</slot>
    </button>
    ... ... 
</template>
<script setup lang="ts">
import { ref } from 'vue';
let greetMeesage = ref("你好啊");
</script>

SlotTest.vue 组件：具名插槽，父组件收到子组件从插槽传递过来的2个属性，使用属性数据在父组件中。

<template>
    <div class="box">
        <FancyButton>
            <template v-slot:header="slotNmaeProps">
                收到消息：{{ slotNmaeProps.content }}，收到价格：{{ slotNmaeProps.count }}元
                <h2 style="color: chocolate;">我是父组件，给子组件具名插槽header传了数据，请查收!</h2>
            </template>
            ... ...
        </FancyButton>
    </div>
</template>

FancyButton.vue 组件：具名插槽给父组件传递2个过去。

<template>
    <header v-if="$slots.header">
        <slot name="header" :content="greetMeesage1" :count="20"></slot>
    </header>
    ... ...
</template>
<script setup lang="ts">
... ...
let greetMeesage1 =ref("具名插槽你好啊")
</script>

vue3 setup

<script setup> 中的 Setup 允许在 Script 中写组合式 api 的开关。这是一个语法糖，很好吃。默认情况下，这个组件内部的属性和方法是不公开给父组件访问的，可以通过defineExpose 编译宏指定哪些属性和方法允许访问。

const testMessage = ref("this is test msg");
defineExpose({ testMessage });

可以是一个 async 函数，但必须配合 suspense 标签， defineAsyncComponent 异步导入组件和 await。
vue2 中 beforeCreate 是最开始执行的钩子。而 vue3 中 setup 在 beforeCreate 之前执行一次，里面的 this 统统指向 undefined。
可以收到两个参数 props、context。context 里面有三个重要对象分别是 attrs 、slots、emit。
在外部给组件传参时，需要在组件内部声明 props 来接收这些参数。如果不声明 props ,传递的数据将在 context.attrs 里存储。
插槽推荐使用 v-slot:slotName 这种写法。简写为 #slotName。
atrrs = this.$attrs; slots = this.$slots; emit = this.$emit context 里的这三个等价于 vue2 的写法。
组件内部的数据对外部组件是关闭的，想要对外暴露数据，需要使用 defineExpose 方法对外暴露。
computed 计算属性，初始化时会执行一次，依赖的变量发生变化时也会自动执行。计算属性中除了做计算外不应该做其他事情。应当避免直接修改计算属性的值,计算属性应该是只读的。完整写法如下：

p.fullName = computed({
  set(value) {
    const nameArr = value.split("-");
    if (nameArr.length == 2) {
      p.firstName = nameArr[0];
      p.lastName = nameArr[1];
    }
  },
  get() {
    return p.firstName + "-" + p.lastName;
  },
});

<template>
  <input type="text" v-model="keyWord">
  <h3>{{ keyWord }}</h3>
</template>
---------------------------------------------------------
<script>
import { ref, customRef } from 'vue'

export default {
  name: 'App',
  setup() {
    //let keyWord = ref('hello')//使用 vue  提供的 ref 来实现实时动态更新功能
    function myRef(value,delay) {
      let timer
      console.log("自定义的myRef", value)
      return customRef((track, trigger) => {
        return {
          get() {
            console.log("有人从myRef中读取数据了", value)
            track() //通知 vue 追踪 value
            return value
          },
          set(newValue) {
            console.log("有人改数据了", newValue)
            value = newValue
            clearTimeout(timer)
            timer = setTimeout(() => {
              trigger() //通知 vue 重新解析模板
            }, delay);
          }
        }
      })
    }
    let keyWord = myRef('hello',500)//使用自定义的 ref 来实现实时动态更新功能
    return {
      keyWord,
      }
    }
  }
  </script>

  <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
  </style>

isRef、isReactive、isReadOnly、isProxy 用法如下：

<script>
import { ref, reactive, toRefs, readonly, isRef,
isReactive, isReadonly, isProxy } from 'vue';
export default {
  name: 'App',
  setup() {
    let car = reactive({
      name: "奔驰",
      price: 40
    })
    let sum = ref(0)
    let car2 = readonly(car)
    console.log(isRef(sum))
    console.log(isReactive(car))
    console.log(isReadonly(car2))
    console.log(isProxy(car))
    console.log(isProxy(car2))

    return {
      ...toRefs(car)
    }
  }
}
</script>

fragment 默认模板元素的根标签，可以减少嵌套和内存。
teleport 将元素传送到某个位置。用法如下:

<template>
  <div>
      <button @click="isShow = true">点我谈个窗</button>
      <Teleport to="body">
          <div class="mask" v-if="isShow">
              <div class="dialouge">
                  <h3>我是一个弹窗</h3>
                  <h4>一些数据内容呢</h4>
                  <h4>一些数据内容呢</h4>
                  <h4>一些数据内容呢</h4>
                  <button @click="isShow = false">关闭弹窗</button>
              </div>
          </div>
      </Teleport>
  </div>
</template>

suspense 展示异步组件。用法如下：

father 组件(父组件)

<script>
import { defineAsyncComponent } from 'vue';//静态引入
const Child = defineAsyncComponent(() => { //异步引入
  return import("./components/Child.vue")
})

export default {
  name: 'App',
  components: { Child },
}
</script>
--------------------------------------------------
<template>
  <div class="app">
    <h3>我是APP组件</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>稍等，加载中... ...</h3>
      </template>
    </Suspense>
  </div>
</template>

child 组件(子组件)

<template>
  <div class="child">
      <h3>我是child组件</h3>
      {{ sum }}
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
    name: 'Child-c',
    async setup() {
        let sum = ref(0)
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({ sum })
            }, 5000);
        })

        return await p
    }
}
</script>

组合式 API 优势

使用传统的配置项 API，新增或者修改一个需求，就需要分别在 data、methods、computed 等钩子里修改。组合式 API 可以更加优雅的组织我们的代码、函数。让相关功能更加有序的组织在一起。

项目开发工具

vue 全家桶

vue
vue-router：路由
pinia：状态管理
vuex：管理状态
mint-ui：ui 组件库
element-plus：UI 组件库
vue-lazyload：图片懒加载
vue-scroller：滚动库
better-scroll：滚动、滑动库
swiper：图片轮播
moment：日期
date-fns：日期，库更小
miit：事件总线

前后台交互

postman：接口测试
mockjs：数据模拟
axios：ajax 请求

模块化

es6
babel
typescript

项目构建工程化

webpack：创建结构化
vite：构建工具
vue-cli：创建项目脚手架
eslint：语法检测

css 预编译器

stylus：css 编译器
less:

数据可视化

echarts：数据可视化开源库
canvas：画布
svg：矢量图

pinia 用法

pinia 之于 vue3 就像 vuex 之于 vue2 一样重要。它们主要充当状态管理的角色。所谓状态管理，简单来说就是一个存储数据的地方，存放在 pinia 中的数据在各个组件中都能访问到，它是 vue 生态中重要的组成部分，它是 Vue 的存储库，它允许您跨组件/页面共享状态。

主要优点

Vue2 和 Vue3 都支持。
pinia 中只有 state、getters、actions，抛弃了 Vuex 中的 Mutation。
pinia 中 action 支持同步和异步，Vuex 不支持。
Typescript 支持良好。
pinia 中每个 store 都是独立的，互相不影响。
pinia 支持插件来扩展自身功能。
体积非常小，只有 1KB 左右。
支持服务端渲染。

使用 pinia

安装 pinia

npm install pinia

创建储存数据的数据容器，并挂载到 app 上

//  main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount("#app");

创建 store：我们可以定义任意数量的 store。
- 首先在项目 src 目录下新建 store 文件夹，用来存放我们创建的各种 store。
- 然后在该目录下新建 user.ts 文件，主要用来存放与 user 相关的 store。

//  /src/store/user.ts

import { defineStore } from "pinia";

// name：一个字符串，必传项，该store的唯一id。
// options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等
export const useUsersStore = defineStore("users", {
  // 其它配置项
});

使用 store

//  /src/App.vue

<script setup lang="ts">
  import {useUsersStore} from './store/user'; const store = useUsersStore();
  console.log(store);
</script>

添加 state

//  修改/src/store/user.ts文件如下

import { defineStore } from "pinia";

// name：一个字符串，必传项，该store的唯一id。
// options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等
export const useUsersStore = defineStore("users", {
  // 给内部添加数据
  // 需要注意的是，state接收的是一个箭头函数返回的值，它不能直接接收一个对象。
  state: () => {
    return {
      name: "小明",
      age: 25,
      sex: "男",
    };
  },
});

操作 state

读取 state 数据。

// /src/App.vue

<script setup lang="ts">
import { useUsersStore } from './store/user';
//import { ref } from 'vue';


const store = useUsersStore();
console.log(store);
//const name = ref<string>(store.name)
//const age = ref<number>(store.age)
//const sex = ref<string>(store.sex)
const {name,age,sex} = store
</script>

<template>
  <div>
    <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>性别：{{ sex }}</p>
  </div>
</template>

多个组件使用 state。
修改 state 数据。storeToRefs 使数据成为响应式的。

// /src/App.vue

import { storeToRefs } from "pinia";
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);

重置 state。调用 store.$reset()。

// /src/App.vue

<button @click="reset">重置</button>

const reset = () => {
    store.$reset();
}

批量更改 state 数据。

// /src/App.vue

<button @click="patchModifyData">批量修改数据</button>

const patchModifyData = () => {
  store.$patch({
    name: "李四",
    age: 20,
    sex: "女"
  })
}

直接替换整个 state。

getters 属性

//  /src/store/user.ts

import { defineStore } from "pinia";

// name：一个字符串，必传项，该store的唯一id。
// options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等
export const useUsersStore = defineStore('users', {
    // 给内部添加数据
    // 需要注意的是，state接收的是一个箭头函数返回的值，它不能直接接收一个对象。
    state: () => {
        return {
            name: "小明",
            age: 25,
            sex: "男",
        };
    },
    getters: {
        getAddAge: (state) => {
            return state.age + 100;
        },
    },
})

// /src/App.vue

<p>新年龄：{{ store.getAddAge }}</p>

//  /src/store/user.ts

import { defineStore } from "pinia";

// name：一个字符串，必传项，该store的唯一id。
// options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等
export const useUsersStore = defineStore('users', {
    // 给内部添加数据
    // 需要注意的是，state接收的是一个箭头函数返回的值，它不能直接接收一个对象。
    state: () => {
        return {
            name: "小明",
            age: 25,
            sex: "男",
        };
    },
    getters: {
        getAddAge: (state) => {
            return state.age + 100;
        },
        getNameAndAge(): string {
            return this.name + this.getAddAge; // 调用其它getter
        },
    },
})

// /src/App.vue
<p>调用其它getter：{{ store.getNameAndAge }}</p>

//  /src/store/user.ts

import { defineStore } from "pinia";

// name：一个字符串，必传项，该store的唯一id。
// options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等
export const useUsersStore = defineStore('users', {
    // 给内部添加数据
    // 需要注意的是，state接收的是一个箭头函数返回的值，它不能直接接收一个对象。
    state: () => {
        return {
            name: "小明",
            age: 25,
            sex: "男",
        };
    },
    getters: {
        getAddAge: (state) => {
            return state.age + 100;
        },
        getAddAge1: (state) => {
            return (num: number) => state.age + num;
        },
        getNameAndAge(): string {
            return this.name + this.getAddAge; // 调用其它getter
        },
    },
})

// /src/App.vue
<p>调用其它getter：{{ store.getAddAge1(741852) }}</p>

actions 属性：actions 属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法。

//  /src/store/user.ts

import { defineStore } from "pinia";

// name：一个字符串，必传项，该store的唯一id。
// options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等
export const useUsersStore = defineStore('users', {
    // 给内部添加数据
    // 需要注意的是，state接收的是一个箭头函数返回的值，它不能直接接收一个对象。
    state: () => {
        return {
            name: "小明",
            age: 25,
            sex: "男",
        };
    },
    getters: {
        getAddAge: (state) => {
            return state.age + 100;
        },
        getAddAge1: (state) => {
            return (num: number) => state.age + num;
        },
        getNameAndAge(): string {
            return this.name + this.getAddAge; // 调用其它getter
        },
    },
    actions: {
        saveName(name: string) {
          this.name = name;
        },
    },
})

// /src/App.vue
<button @click="saveName">保存姓名</button>

const saveName = () => {
    store.name = "王五";
}