Pinia 怎么在组合式 API 中引入并使用状态仓库-Vue.js-PHP中文网

Pinia在组合式API中使用分三步：安装注册根仓库、定义模块化store、组件中调用useStore获取实例；支持跨组件状态共享与自动响应更新。

pinia 怎么在组合式 api 中引入并使用状态仓库

Pinia 在组合式 API 中的引入和使用非常直接，核心是三步：安装并注册根仓库、定义模块化 store、在组件中调用 useStore 函数获取实例。

安装并注册 Pinia 根仓库

先通过包管理器安装：

npm install pinia 或 yarn add pinia

在 src/store/index.ts（或 .js）中创建根仓库实例：

import { createPinia } from 'pinia'
export const store = createPinia()

然后在项目入口文件 main.ts 中注册：

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'
<p>const app = createApp(App)
app.use(store) // 注册为插件
app.mount('#app')
</p>

定义组合式写法的 store 模块

在 src/store/modules/counter.ts 中使用函数式 defineStore：

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
<p>export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const double = computed(() => count.value * 2)</p><p>function increment() {
count.value++
}</p><p>function reset() {
count.value = 0
}</p><p>return {
count,
double,
increment,
reset
}
})
</p>

注意：返回的对象中所有属性和方法都会自动响应式，无需额外处理。

在 setup 组件中使用 store

在 <script setup></script> 中直接导入并调用：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

<template><div>
    <p>当前数量：{{ counterStore.count }}</p>
    <p>两倍值：{{ counterStore.double }}</p>
    <button>+1</button>
    <button>重置</button>
  </div>
</template><p><script setup lang="ts">
import { useCounterStore } from '@/store/modules/counter'</script></p><p>const counterStore = useCounterStore()

</p>

useCounterStore() 返回的是一个响应式 store 实例，可直接读取 state、调用 action、访问 getter。