vue3安装Pinia

### 安装和配置Pinia

#### 安装Pinia

为了在Vue 3项目中集成Pinia状态管理库，需先通过`npm`安装Pinia。这可以通过命令行工具完成：

npm install pinia @pinia/web

上述命令会在项目的依赖项中加入Pinia及其必要的Web扩展[^2]。

#### 创建Pinia实例并挂载到应用

创建一个新的JavaScript或TypeScript文件用于初始化Pinia插件，并将其注入至Vue应用程序上下文中。通常此操作位于`src/store/index.ts`:

// src/store/index.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'

const app = createApp(App)

app.use(createPinia())
app.mount('#app')

这段代码展示了如何创建一个Pinia实例并通过调用`use()`方法附加给Vue根组件实例[^1]。

#### 使用Store定义数据存储逻辑

接下来，在`store`目录下建立具体的仓库(store)，例如用户认证相关的仓库可以命名为`auth.ts`:

// src/store/auth.ts
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: null,
    user: {}
  }),
  actions: {
    login(email, password) {
      // 登录业务逻辑...
    },
    logout() {
      this.token = null;
      this.user = {};
    }
  }
})

这里利用了`defineStore`函数来声明名为`auth`的数据仓库，其中包含了初始状态(state)以及一系列改变该状态的方法(actions)。

#### 访问Store中的属性与方法

最后一步是在任何Vue组件内访问已定义好的仓库对象。借助组合式API(composition API), 可以轻松获取所需的功能：

<script setup>
import { useAuthStore } from '../stores/auth';

const auth = useAuthStore();

console.log(auth.token); // 获取token值
</script>

以上就是完整的设置流程，确保按照这些步骤执行即可成功引入Pinia作为Vue 3项目的全局状态管理者。