Pinia 是一个基于 Vue.js 的状态管理库,特别是为 Vue 3 设计,旨在提供一种简单、直观且类型安全的方式来管理 Vue.js 应用的状态。以下是 Pinia 的基本用法:
1. 安装 Pinia
npm install pinia # 或者
yarn add pinia
2. 创建 Pinia 实例
在你的 Vue 应用中(通常在 main.js
或 main.ts
文件中),你需要创建一个 Pinia 实例,并将其添加到 Vue 应用中:
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
使用 defineStore
函数来定义你的状态仓库(Store)。这个函数接受两个参数:store 的 ID 和一个包含 store 选项的对象(如 state、getters、actions 等)。
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: 'John Doe',
age: 30
}),
getters: {
// 计算属性,基于 state 的数据返回一些值
userNameWithAge(state) {
return `${state.name} (${state.age})`
}
},
actions: {
// 定义改变 state 的逻辑
incrementAge() {
this.age++
}
}
})
4. 在组件中使用 Store
在 Vue 组件中,你可以通过 useStore
函数(这里的函数名基于你定义的 Store 名字,如 useUserStore
)来获取 Store 的实例,并访问其 state、getters 和 actions。
<template>
<div>
<p>{{ userStore.name }}</p>
<p>{{ userStore.age }}</p>
<p>{{ userStore.userNameWithAge }}</p>
<button @click="incrementAge">Increment Age</button>
</div>
</template>
<script setup>
import { useUserStore } from './stores/userStore'
const userStore = useUserStore()
function incrementAge() {
userStore.incrementAge()
}
</script>
5. 响应式处理
当你从 Store 中解构出状态时,你需要使用 storeToRefs
或类似方法来保持其响应性,否则状态将失去响应性。
import { storeToRefs } from 'pinia'
const { name, age } = storeToRefs(userStore)