P
inia 是
Vue.js 的状态管理库，它在
Vue 3 中得到了原生支持。P
inia 是基于 Composition API 设计的，相比于
Vue 2 的
Vuex，P
inia 更简洁、更容易
使用，并且拥有了更好的 TypeScript 支持。
要
使用 P
inia，首先需要安装它：
```bash
npm install p
inia
```
然后，在你的
Vue 3 应用中引入并
使用 P
inia：
```javascript
import { createApp } from '
vue'
import { createP
inia } from 'p
inia'
import App from './App.
vue'
const app = createApp(App)
// 创建 P
inia 实例
const p
inia = createP
inia()
// 将 P
inia 实例添加到
Vue 应用中
app.use(p
inia)
app.mount('#app')
```
接下来，你可以定义你的 store。一个基本的 P
inia store 包含了状态、getters、actions 和选项：
```javascript
// src/stores/counter.js
import { defineStore } from 'p
inia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
},
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})
```
在组件中
使用 store 的步骤如下：
```
vue
<template>
<div>
<p>Count is: {{ counterStore.count }}</p>
<p>Double count is: {{ counterStore.doubleCount }}</p>
<button @click="counterStore.increment">Increment</button>
</div>
</template>
<script>
import { defineComponent } from '
vue'
import { useCounterStore } from '../stores/counter'
export default defineComponent({
setup() {
const counterStore = useCounterStore()
return {
counterStore,
}
},
})
</script>
```
通过以上步骤，你可以在
Vue 3 应用中成功地
使用 P
inia 进行状态管理。
扫一扫
5195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
