Pinia是Vue 3官方推荐的状态管理模式,由尤雨溪创建并集成到了 Vue.js 中,它是一个轻量级、纯粹基于函数的思想实现的应用状态管理库。Pinia的设计理念类似于Redux,但它更简单易用,更适合于小型到中型的单文件组件应用。
在Vue 3项目中使用Pinia,主要有以下几个步骤:
1. 安装:通过npm或yarn安装`pinia`库:
npm install pinia vue
2. 创建store:在项目中创建一个名为store.js的文件,声明store实例并定义state、getters、actions和mutations:
```javascript
import { createStore } from 'pinia';export const store = createStore({state() {// 定义初始状态return {count: 0,};},getters: {getCount(state) {return state.count;}},actions: {increment(context) {context.commit('increment');}},mutations: {increment(state) {state.count++;}}});
```
3. 使用store:在需要的地方注入store,并访问其中的数据:
```html
<script setup>import { useStore } from '@pinia/core';const store = useStore();function handleClick() {store.increment();}</script><button @click="handleClick">Increment</button><p>{{ store.getCount() }}</p>
```
4. 提供插件支持:Pinia可以方便地与其他Vue插件配合使用,如Vuex Router Integration等。
pinia文档