当前位置：首页 > news >正文

【vue 引入pinia与pinia的详细使用】

news 2025/8/16 22:28:31

vue引入pinia与使用

- 安装
- 引入
- 使用
- - 定义 store
  - 在组件中使用 store
  - 在插件中使用 store
  - 配置 store
- 总结

Pinia 是一个用于 Vue 3 的状态管理库，其设计目标是提供一个简单、一致的 API 和强类型支持。下面介绍如何引入 Pinia 并使用它。

安装

npm install pinia

引入

在 main.js 中引入 Pinia：

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

这里我们用 createPinia 方法创建了一个新的 Pinia 实例，并通过 app.use 方法将其注册到 Vue 应用实例中。

使用

定义 store

在 Pinia 中，我们通过 defineStore 方法来定义一个 store：

import { defineStore } from 'pinia'export const useCounterStore = defineStore({id: 'counter',state: () => ({ count: 0 }),actions: {increment() {this.count++},decrement() {this.count--},},
})

在这个例子中，我们定义了一个名为 useCounterStore 的 store，其中包含一个状态属性 count 和两个 action 方法 increment 和 decrement。

在组件中使用 store

<template><div><p>Count: {{ counter.count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { useCounterStore } from './store'export default {setup() {const counter = useCounterStore()function increment() {counter.increment()}function decrement() {counter.decrement()}return {counter,increment,decrement,}},
}
</script>

在组件中，我们通过 useCounterStore() 方法获取 useCounterStore 的实例，并通过它来访问状态属性和 action 方法。

在插件中使用 store

如果你需要在插件中使用 store，那么可以通过 useStore 方法来获取 store 实例：

import { useCounterStore } from './store'export default {install(app, options) {app.provide('counterStore', useCounterStore())// ...}
}

在这个例子中，我们将 useCounterStore() 的返回值提供给了 Vue 的 provide 方法，以便在插件中进行访问。

配置 store

defineStore 方法还支持可选的 actions、getters 和 mutations 配置项，以支持更加灵活的状态管理模式。

import { defineStore } from 'pinia'export const useCounterStore = defineStore({id: 'counter',state: () => ({ count: 0 }),getters: {doubleCount() {return this.count * 2},},actions: {increment() {this.count++},decrement() {this.count--},},mutations: {reset() {this.count = 0},},
})