＜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?函数来获取状态存储，并使用状态存储中的状态和操作。

<template>
    <div class="content">
        <h1>
            {{ countStore.count }}<br>
            {{ countStore.doubleCount }}
            <button @click="add">+10</button><br>
            <button @click="countStore.increment">+1</button>
        </h1>
    </div>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/stores/counter'
const countStore = useCounterStore()
function add() {
    countStore.count += 10
}

</script>

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