在 Vue 3 中，Pinia 是一个强大的状态管理库，它提供了比 Vuex 更加简洁和直观的 API。通过 Pinia，你可以轻松地管理全局变量，并在你的 Vue 应用中共享这些状态。

以下是如何在 Vue 3 项目中设置和使用 Pinia 来管理全局变量的步骤：

1. 安装 Pinia

首先，你需要安装 Pinia。你可以使用 npm 或 yarn 来安装：

npm install pinia 
# 或者
yarn add pinia

2. 配置 Pinia

在你的 Vue 3 应用中，你需要在应用的主入口文件（通常是 main.js 或 main.ts）中配置 Pinia。

// main.js 或 main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue'; 
const app = createApp(App);
const pinia = createPinia(); 
app.use(pinia);
app.mount('#app');

3. 创建一个 Store

在 Pinia 中，状态被封装在 "stores" 中。你可以创建一个新的 store 文件来管理你的全局变量。例如，创建一个 stores/counter.js 文件：

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore({
    id: 'counter', // store 的唯一标识符  
    state: () => ({ 
        count: 0,
        user: null, 
        // 其他全局变量  
    }), 
    actions: {
        increment() { 
            this.count  ;
            },
        decrement() {
            this.count--;
        },
        setUser(user) {
            this.user = user;
        },
        // 其他方法  
    },
});

4. 使用 Store

在你的 Vue 组件中，你可以使用 useCounterStore 来访问和操作这个 store 中的状态。

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
        <button @click="decrement">Decrement</button>
        <p>User: {{ user }}</p>
        <input v-model="userInput" placeholder="Enter user name" />
        <button @click="setUserFromInput">Set User</button>
    </div>
</template>
<script setup>
    import { useCounterStore } from './stores/counter';
    const counterStore = useCounterStore();
    const { count, user } = counterStore;
    const userInput = ref('');
    const increment = () => {
        counterStore.increment();
    };
    const decrement = () => {
        counterStore.decrement();
    };
    const setUserFromInput = () => {
        counterStore.setUser(userInput.value);
    };
</script>

5. 在多个组件中共享 Store

由于 Pinia 的 store 是全局的，你可以在应用的任何组件中通过导入并使用相应的 store 来访问和操作这些全局变量。

<template>
    <div>
        <p>User from another component: {{ user }}</p>
    </div>
</template>
<script setup>
    import { useCounterStore } from './stores/counter';
    const counterStore = useCounterStore();
    const { user } = counterStore;
</script>

总结

Pinia 提供了一种简单而强大的方式来管理 Vue 3 应用中的全局变量。通过创建 store，你可以轻松地定义状态和操作，并在整个应用中共享这些状态。希望这些步骤能帮助你在 Vue 3 项目中成功地使用 Pinia。