＜script setup＞中pinia的使用

1.安装 Pinia：

首先，在你的 Vue 3 项目中安装 Pinia。你可以使用 npm 或者 yarn 来安装 Pinia。

yarn add pinia
# 或者使用 npm
npm install pinia

2.创建 Pinia 实例：

在你的应用程序中创建一个 Pinia 实例。通常，你可以在应用程序的入口文件（如 main.js）中创建 Pinia 实例。

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

// 将 Pinia 实例挂载到应用程序上
app.use(pinia);
app.mount('#app');

3.创建状态存储：

创建一个状态存储，以便在组件中使用。状态存储是一个包含应用程序状态的对象，可以在整个应用程序中共享和使用。

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

// 在 src/store 文件夹下创建一个 counter.ts 文件
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

4.在组件中使用状态存储：

在你的组件中使用 useStore 函数来获取状态存储，并使用状态存储中的状态和操作。

Pinia | The intuitive store for Vue.js (vuejs.org)