Pinia概念详解与使用：一文搞懂pinia状态管理（保姆级教程）
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态
Pinia与Vuex的区别
- 支持选项式api和组合式api写法
- pinia没有mutations，只有：state、getters、actions
- pinia分模块不需要modules（之前vuex分模块需要modules）
- TypeScript支持很好
- 自动化代码拆分
- pinia体积更小（性能更好）
应用流程
1 安装
// 使用 npm 安装
npm install pinia
// 使用 yarn 安装
yarn add pinia
// 使用 pnpm 安装
pnpm add pinia
2 创建Pinia并全局注册
使用脚手架创建项目时有安装Pinia，可跳过此步
src/stores/index.js
import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia
main.js
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
const app = createApp(App)
app.use(pinia) //注册全局pinia
app.mount('#app')
3 创建store
使用pinia提供的 defineStore() 方法来创建一个store，该store用来存放我们需要全局使用的数据。
src/stores/modules/user.js
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
state: () => {
return {
counter: 0,
}
},
getters:{},
actions:{}
})
创建store很简单，调用pinia中的defineStore函数即可，该函数接收两个参数：
- name：一个字符串，必传项，该store的唯一id。
- options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
我们可以定义任意数量的store，因为我们其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。
4 使用store
app.vue
<script setup >
import { useUsersStore } from "../src/stores/modules/user";
const store = useUsersStore();
console.log(store);
</script>
5 state
5.1 Pinia定义state数据
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
name: 'Eduardo',
isAdmin: true,
}
},
getters:{},
actions:{}
})
5.2 组件使用pinia的state数据
<template>
<div>
<h1>A组件</h1>
{{ name }}
</div>
</template>
<script setup>
import { useStore } from '../store'
const store = useStore();
let { name } = store;
</script>
但结构出来的name数据是非响应式的，需要用storeToRef()来进行转换，才能动态获取数据
5.3 组件修改pinia的state数据
本身pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改，但是上面写的let { name } = store这种解构是非响应式的，所以要换解构的方式。
<template>
<div>
<h1>A组件</h1>
{{ name }}
<button @click='btn'>按钮</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name } = storeToRefs(store);
const btn = ()=>{
name.value = '123';
}
</script>
5.4 批量更新state数据
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
name: 'Eduardo',
arr:['a','b','c']
}
},
getters:{},
actions:{}
})
组件代码
<template>
<div>
<h1>A组件</h1>
{{ name }}
{{ counter }}
{{ arr }}
<button @click='btn'>按钮</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name,counter,arr } = storeToRefs(store);
const btn = ()=>{
//批量更新
store.$patch(state=>{
state.counter++;
state.arr.push(4);
state.name = '456';
})
}
</script>
使用$patch进行批量更新
6 actions
actions就比较简单了，写入方法，比如我们可以让state中的某一个值+=，而且传入参数
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0
}
},
getters:{},
actions:{
changeCounter( val ){
this.counter += val;
}
}
})
组件
<template>
<div>
<h1>A组件</h1>
{{ counter }}
<button @click='add'>加10</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter } = storeToRefs(store);
const add = ()=>{
store.changeCounter(10);
}
</script>
7 getters
getters和vuex的getters几乎类似，也是有缓存的机制
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
}
},
getters:{
counterPar( ){
console.log(111);
return this.counter + 100;
}
},
actions:{}
})
<template>
<div>
{{ counterPar }}
{{ counterPar }}
{{ counterPar }}
<h1>A组件</h1>
{{ counter }}
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter, counterPar } = storeToRefs(store);
</script>
参考资料：
(186条消息) 一文搞懂Pinia的使用【简洁易懂】
Pinia？看这篇就够了！ - 掘金 (juejin.cn)
一文搞懂pinia状态管理（保姆级教程） - 知乎 (zhihu.com)
