Vue3使用Pinia获取全局状态变量

Pinia 是 Vue 3 的状态管理库，用于替代 Vuex。使用 Pinia，你可以轻松地在 Vue 3 应用中管理全局状态。下面是如何使用 Pinia 获取全局状态变量的说明和代码示例：

安装 Pinia

首先，确保你已经安装了 Vue 3 和 Pinia：

npm install vue@next pinia@next

创建 Pinia Store

创建一个 Pinia store 来存储你的全局状态：

javascript// stores/index.js
import { createPinia } from 'pinia';
import app from '../src/app'; // Vue 3 app instance

const pinia = createPinia();
app.use(pinia);

创建 Store

在 stores 目录下创建一个新的 store：

// stores/myGlobalStore.js
import { defineStore } from 'pinia';

export const useMyGlobalStore = defineStore('myGlobalStore', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
},
});

在组件中使用 Store

现在你可以在任何 Vue 组件中使用这个 store：

// src/components/MyComponent.vue

初始化全局状态

在 src/main.js 或类似的入口文件中，确保你在创建 Vue 实例之前初始化 Pinia store：

import { createApp } from 'vue';
import App from './App.vue'; // your main Vue component here
import { createPinia } from 'pinia'; // import Pinia here if you haven't already done so in your store setup file (step 2)
import { useMyGlobalStore } from './stores/myGlobalStore'; // import your store here if you haven't already done so in your component (step 4) or store setup file (step 3)
// ... other imports ...