Vue3.2 setup语法糖、Composition API和状态库Pinia

2024-02-18 22:44:43

Vue3.2 中的 setup 语法糖
Vue3.2 中引入的 setup 语法糖是一种新的函数，允许您在组件中定义可重用的逻辑。它类似于 beforeCreate 和 created 生命周期钩子，但提供了更简洁和集中的方式来管理组件的状态和行为。

使用 setup 语法糖

setup 语法糖的使用非常简单。只需在 <script> 标签上添加 setup 属性，并将其值设置为一个函数。这个函数将接收两个参数：

props：包含组件属性的对象。
context：包含组件上下文信息的对象，包括根 Vue 实例、父组件和插槽等。

您可以在 setup 函数中使用 useState() 和 useRefs() 等新 API 来管理组件的状态。这些 API 允许您创建响应式状态，并将其与组件模板中的数据绑定。

<script setup>
  const count = useState(0)
  const increment = () => { count.value++ }
</script>

<template>
  <button @click="increment">+</button>
  <p>Count: {{ count }}</p>
</template>

Vue Composition API

Vue Composition API 是一个强大的工具，允许您将组件的逻辑分解成更小的、可重用的函数，从而提高代码的可读性和可维护性。

使用 Composition API

Composition API 的使用也非常简单。只需将您想要重用的逻辑提取到一个单独的函数中，然后在需要的地方导入并使用它。

// MyComposable.js
export function useCounter() {
  const count = useState(0)
  const increment = () => { count.value++ }
  return { count, increment }
}

// MyComponent.vue
<script setup>
  const { count, increment } = useCounter()
</script>

<template>
  <button @click="increment">+</button>
  <p>Count: {{ count }}</p>
</template>

状态管理库 Pinia

Pinia 是一个轻量级的状态管理库，专为 Vue.js 应用程序而设计。它提供了一个简单而强大的 API，可以帮助您管理应用程序的共享状态。

使用 Pinia

Pinia 的使用也非常简单。首先，您需要在您的 Vue.js 项目中安装 Pinia：

npm install pinia

然后，您可以在您的 Vue.js 应用程序中创建一个 Pinia 实例：

import { createPinia } from 'pinia'
const pinia = createPinia()

接下来，您就可以在您的组件中使用 Pinia 来管理共享状态。

<script setup>
  const counter = useStore(counterStore)
</script>

<template>
  <button @click="counter.increment">+</button>
  <p>Count: {{ counter.count }}</p>
</template>