基本介绍
Pinia 是 Vue.js 的轻量级状态管理库
中文文档: https://pinia.web3doc.top/introduction.html
为什么学习pinia?
- pinia和vuex4一样，也是vue 官方 状态管理工具(作者是 Vue 核心团队成员）
- pinia相比vuex4，对于vue3的 兼容性 更好
- pinia相比vuex4，具备完善的 类型推荐 => 对 TS 支持很友好
- pinia同样支持vue开发者工具
- Pinia 的 API 设计非常接近
Vuex 5的提案。
pinia核心概念
- state: 状态
- actions: 修改状态（包括同步和异步，pinia中没有mutations）
- getters: 计算属性
vuex只能有一个根级别的状态, pinia 直接就可以定义多个根级别状态
基本使用与state
目标：掌握pinia的使用步骤
（1）安装
yarn add pinia # or npm i pinia
（2）在main.js中挂载pinia
import { createApp } from 'vue' import App from './App.vue' import { createPinia } from 'pinia' const pinia = createPinia() createApp(App).use(pinia).mount('#app')
（3）新建文件store/counter.js
import { defineStore } from 'pinia' // 创建store,命名规则： useXxxxStore // 参数1：store的唯一表示 // 参数2：对象，可以提供state actions getters const useCounterStore = defineStore('counter', { state: () => { return { count: 0, } }, getters: { }, actions: { }, }) export default useCounterStore
(4) 在组件中使用
<script setup> import useCounterStore from './store/counter' const counter = useCounterStore() </script> <template> <h1>根组件---{{ counter.count }}</h1> </template> <style></style>
actions的使用
目标：掌握pinia中actions的使用
在pinia中没有mutations，只有actions，不管是同步还是异步的代码，都可以在actions中完成。
（1）在actions中提供方法并且修改数据
import { defineStore } from 'pinia' // 1. 创建store // 参数1：store的唯一表示 // 参数2：对象，可以提供state actions getters const useCounterStore = defineStore('counter', { state: () => { return { count: 0, } }, actions: { increment() { this.count++ }, incrementAsync() { setTimeout(() => { this.count++ }, 1000) }, }, }) export default useCounterStore
（2）在组件中使用
<script setup> import useCounterStore from './store/counter' const counter = useCounterStore() </script> <template> <h1>根组件---{{ counter.count }}</h1> <button @click="counter.increment">加1</button> <button @click="counter.incrementAsync">异步加1</button> </template>
getters的使用
pinia中的getters和vuex中的基本是一样的，也带有缓存的功能
（1）在getters中提供计算属性
import { defineStore } from 'pinia' // 1. 创建store // 参数1：store的唯一表示 // 参数2：对象，可以提供state actions getters const useCounterStore = defineStore('counter', { state: () => { return { count: 0, } }, getters: { double() { return this.count * 2 }, }, actions: { increment() { this.count++ }, incrementAsync() { setTimeout(() => { this.count++ }, 1000) }, }, }) export default useCounterStore
(2)在组件中使用
<h1>根组件---{{ counter.count }}</h1> <h3>{{ counter.double }}</h3>
storeToRefs的使用
目标：掌握storeToRefs的使用
如果直接从pinia中解构数据，会丢失响应式， 使用storeToRefs可以保证解构出来的数据也是响应式的
<script setup> import { storeToRefs } from 'pinia' import useCounterStore from './store/counter' const counter = useCounterStore() // 如果直接从pinia中解构数据，会丢失响应式 const { count, double } = counter // 使用storeToRefs可以保证解构出来的数据也是响应式的 const { count, double } = storeToRefs(counter) </script>
pinia模块化
在复杂项目中，不可能吧多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合
（1）新建store/user.js文件
import { defineStore } from 'pinia' const useUserStore = defineStore('user', { state: () => { return { name: 'zs', age: 100, } }, }) export default useUserStore
(2)新建store/index.js
import useUserStore from './user' import useCounterStore from './counter' // 统一导出useStore方法 export default function useStore() { return { user: useUserStore(), counter: useCounterStore(), } }
（3）在组件中使用
<script setup> import { storeToRefs } from 'pinia' import useStore from './store' const { counter } = useStore() // 使用storeToRefs可以保证解构出来的数据也是响应式的 const { count, double } = storeToRefs(counter) </script>
总结
总得来说，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2，Vue3以及TypeScript。
在Vuex的基础上去掉了 Mutation，只保留了 state, getter和action。
Pinia拥有更简洁的语法， 扁平化的代码编排，符合Vue3 的 Composition api
