Pinia 使用文档
标签
Vue
Pinia
字数
700 字
阅读时间
4 分钟
Pinia 是 Vue.js 的一种状态管理库,提供了比 Vuex 更简洁、更直观的 API。它在 Vue 3 中得到了广泛应用,并且与 Vue DevTools 完美集成。
1 安装
首先,确保你已经安装了 pnpm
,然后在项目中安装 pinia
:
bash
pnpm add pinia
2 创建 Store
在 src
目录下创建 stores
文件夹,并在其中创建一个 store,例如 counter.js
文件:
javascript
// src/stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++
}
}
})
3 在 Vue 应用中使用 Store
在 src/main.js
中引入并使用这个 store:
javascript
// src/main.js
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')
4 使用 State
在组件中访问 Pinia store 的状态,可以使用 useCounterStore
:
vue
<template>
<div>
{{ count }}
</div>
</template>
<script>
import { useCounterStore } from '../stores/counter'
export default {
setup() {
const counterStore = useCounterStore()
return {
count: counterStore.count
}
}
}
</script>
5 使用 Getters
Getters 可以认为是 store 的计算属性,在组件中使用 getters:
vue
<template>
<div>
Double Count: {{ doubleCount }}
</div>
</template>
<script>
import { useCounterStore } from '../stores/counter'
export default {
setup() {
const counterStore = useCounterStore()
return {
doubleCount: counterStore.doubleCount
}
}
}
</script>
6 调用 Actions
Actions 是改变 store 状态的唯一方法,可以在组件中调用 actions:
vue
<template>
<div>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { useCounterStore } from '../stores/counter'
export default {
setup() {
const counterStore = useCounterStore()
return {
increment: counterStore.increment
}
}
}
</script>
7 组合式 API
Pinia 与 Vue 3 的组合式 API 紧密集成,可以更灵活地管理状态:
vue
<template>
<div>
{{ count }}
Double Count: {{ doubleCount }}
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { useCounterStore } from '../stores/counter'
export default {
setup() {
const counterStore = useCounterStore()
return {
count: counterStore.count,
doubleCount: counterStore.doubleCount,
increment: counterStore.increment
}
}
}
</script>
8 模块化 Store
对于大型应用,可以将 store 分割成多个模块。Pinia 中,每个模块就是一个独立的 store。
8.1 创建模块
javascript
// src/stores/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: 'John Doe'
}),
actions: {
setName(newName) {
this.name = newName
}
}
})
8.2 使用模块
vue
<template>
<div>
User Name: {{ name }}
<button @click="setName('Jane Doe')">Change Name</button>
</div>
</template>
<script>
import { useUserStore } from '../stores/user'
export default {
setup() {
const userStore = useUserStore()
return {
name: userStore.name,
setName: userStore.setName
}
}
}
</script>
9 持久化状态
Pinia 没有内置持久化插件,但你可以使用第三方插件,例如 pinia-plugin-persistedstate
,以便在刷新页面后保留状态。
9.1 安装插件
bash
pnpm add pinia-plugin-persistedstate
9.2 配置插件
javascript
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.mount('#app')
9.3 使用持久化状态
javascript
// src/stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
persist: true
})