Vue3-Day2新特性-defineOptions 背景说明：有 <script setup> 之前，如果要定义 p

新特性-defineOptions

背景说明：

有 <script setup> 之前，如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。

但是用了<script setup>后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。

为了解决这一问题，引入了 defineProps 与 defineEmits 这两个宏。但这只解决了props与 emits 这两个属性。

如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的

这样就会存在两个 <script> 标签让人无法接受

所以在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义，主要是用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项， props, emits, expose, slots 除外（因为这些可以使用 defineXXX 来做到）

<script setup>
    defineOptions({
      name:'Foo',
      inheritAtters: false,
      //...更多自定义属性
    })
    </script>

新特性-defineModel

在Vue3中，自定义组件上使用v-model, 相当于传递一个modelValue属性，同时触发 update:modelValue 事件

我们需要先定义 props，再定义 emits 其中有许多重复的代码。如果需要修改此值，还需要手动调用 emit 函数

<script setup>
const modelValue = defineModel()
modelValue.value++
</script>

Pinia

Pinia 是 Vue 的专属的最新状态管理库，是 Vuex 状态管理工具的替代品

手动添加Pinia到Vue项目

在实际开发项目的时候，Pinia可以在项目创建时自动添加，现在我们初次学习，从零开始：

使用 Vite 创建一个空的 Vue3项目

npm init vite@latest

按照官方文档安装 pinia 到项目中

Pinia基础使用

定义store
组件使用store

getters实现

Pinia中的 getters 直接使用 computed函数进行模拟, 组件中需要使用需要把 getters return出去

action 异步实现

方式：异步action函数的写法和组件中获取异步数据的写法完全一致

接口地址：geek.itheima.net/v1_0/channe…

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中

实例：

Son1Com.vue

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

<template>
  <div>
    我是Son1.vue - {{ counterStore.count }} - {{ counterStore.double }}
    <button @click="counterStore.addCount">+</button>
  </div>
</template>

<style scoped>

</style>

Son2Com.vue

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

<template>
  <div>
    我是Son2.vue - {{ counterStore.count }}
    <button @click="counterStore.subCount">-</button>
  </div>
</template>

<style scoped>

</style>

Counter.js

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 定义store
// defineStore(仓库的唯一标识, () => { ... })
export const useCounterStore = defineStore('counter', () => {
  // 声明数据 state - count
  const count = ref(100)

  // 声明操作数据的方法 action (普通函数)
  const addCount = () => count.value++
  const subCount = () => count.value--

  // 声明基于数据派生的计算属性 getters (computed)
  const double = computed(() => count.value * 2)

  // 声明数据 state - msg
  const msg = ref('hello pinia')
  return {
    count,
    double,
    addCount,
    subCount,

    msg,
  }
}, {
  // persist: true // 开启当前模块的持久化
  persist: {
    key: 'hm-counter', // 修改本地存储的唯一标识
    paths: ['count'] // 存储的是哪些数据
  }
})

App.vue

<script setup>
import { storeToRefs } from 'pinia'
import Son1Com from '@/components/Son1Com.vue'
import Son2Com from '@/components/Son2Com.vue'
import { useCounterStore } from '@/store/counter'
import { useChannelStore } from './store/channel'
const counterStore = useCounterStore()
const channelStore = useChannelStore()

// 此时，直接解构，不处理，数据会丢失响应式
const { count, msg } = storeToRefs(counterStore)
const { channelList } = storeToRefs(channelStore)
const { getList } = channelStore
</script>

<template>
  <div>
    <h3>
      App.vue根组件 
      - {{ count }}
      - {{ msg }}
    </h3>
    <Son1Com></Son1Com>
    <Son2Com></Son2Com>
    <hr>
    <button @click="getList">获取频道数据</button>
    <ul>
      <li v-for="item in channelList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>

channel.js

 import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from 'axios'

export const useChannelStore = defineStore('channel', () => {
  // 声明数据
  const channelList = ref([])

  // 声明操作数据的方法
  const getList = async () => {
    // 支持异步
    const { data: { data }} = await axios.get('http://geek.itheima.net/v1_0/channels')
    channelList.value = data.channels
  }

  // 声明getters相关
  return {
    channelList,
    getList
  }
})

效果如下：

storeToRefs工具函数

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构

Pinia 调试

Vue官方的 dev-tools 调试工具对 Pinia直接支持，可以直接进行调试

Pinia持久化插件

官方文档：prazdevs.github.io/pinia-plugi…

安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

使用 main.js

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

配置 store/counter.js

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  ...
  return {
    count,
    doubleCount,
    increment
  }
}, {
  persist: true
})

其他配置，看官网文档即可

key：修改本地存储的唯一标识

path:存储的是哪些数据

Vue3-Day2