一、Pinia概述
Pinia
开始于大概2019年,最初作为一个实验为Vue
重新设计状态管理,让它用起来像组合API
。
Pinia
本质上依然是一个状态管理的库,用于跨组件、页面进行状态共享(这点和Vuex
、Redux
一样)。
Pinia
(发音为/piːnjʌ/
,如英语中的peenya
)是最接近piña
(西班牙语中的菠萝)的词。
这可能也是Pinia
的图标是一个菠萝的原因。
二、Pinia和Vuex的区别
Pinia
最初是为了探索 Vuex
的下一次迭代会是什么样子,结合了 Vuex 5
核心团队讨论中的许多想法。
最终,团队意识到Pinia
已经实现了Vuex5
中大部分内容,所以最终决定用Pinia
来替代Vuex
。
和Vuex相比,Pinia有很多的优势:
mutations
不再存在更友好的
TypeScript
支持,Vuex
之前对TS
的支持很不友好不再有
module
s的嵌套结构,可以灵活使用每一个store
,它们是通过扁平化的方式来相互使用的不再有命名空间的概念,不需要记住它们的复杂关系
三、Pinia的安装和基本配置
3.1 安装Pinia
# npm 方式npm install pinia# yarn 方式yarn add pinia
3.2 创建一个pinia并且将其传递给应用程序
1)新建store文件夹,在此文件夹下新建一个index.js
import { createPinia } from 'pinia'//创建一个pinia实例const pinia = createPinia()export default pinia
2)在main.js中use它
import { createApp } from 'vue'import App from './App.vue'import pinia from './stores'createApp(App).use(pinia).mount('#app')
完成上述代码后,pinia在项目中就生效了
四、Pinia中的Store
4.1 什么是Store?
一个
Store
(如Pinia
)是一个实体,它会持有绑定到你组件树的状态和业务逻辑,即保存了全局的状态;它有点像始终存在,并且每个人都可以读取和写入的组件;
你可以在你的应用程序中定义任意数量的
Store
来管理你的状态;
Store
有三个核心概念: state
、getters
、actions
。
等同于组件的data
、computed
、methods
。
一旦 store
被实例化,你就可以直接在 store
上访问 state
、getters
和 actions
中定义的任何属性。
4.2 如何定义一个store
定义之前需要知道:
store
是使用defineStore()
定义的并且它需要一个唯一名称,作为第一个参数传递
这个 唯一名称
name
,也称为id
,是必要的,Pinia
使用它来将store
连接到devtools
返回的函数统一使用
useX
作为命名方案,这是约定的规范
具体示例:
定义一个counter.js
,在里面定义一个store
// 定义关于counter的storeimport { defineStore } from 'pinia'const useCounter = defineStore("counter", { // 在 Pinia 中,状态被定义为返回初始状态的函数 state: () => ({ count: 99 })})export default useCounter
这里有一个注意点,就是defineStore
函数的返回值的命名规则:
以use
开头,加上传给defineStore
函数的第一个参数组成,使用驼峰命名法。
这虽然不是强制,确是一个大家都遵守的规范。
4.3 使用store读取和写入 state:
<template> <div class="home"> <h2>Home View</h2> <!-- 2.使用useCounter的实例获取state中的值 --> <h2>count: {{ counterStore.count }}</h2> <h2>count: {{ count }}</h2> </div></template><script setup> import useCounter from '@/stores/counter'; import { storeToRefs } from 'pinia' // 1.直接使用useCounter获取counter这个Store的实例 // 这个函数名称取决于defineStore的返回值 const counterStore = useCounter() // 使用storeToRefs对数据进行结构,让count保持响应式的效果 const { count } = storeToRefs(counterStore) // 3.修改(写入)store counterStore.count++ </script>
store
在它被使用之前是不会创建的,我们可以通过调用use
函数来使用store
。
Pinia
中可以直接使用store
实例去修改state
中的数据,非常方便。
注意:
store
获取到后不能被解构,因为会让数据失去响应式。
为了从 store
中提取属性同时保持其响应式,需要使用storeToRefs()
。
4.4 修改state的多种方式
1)定义一个关于user的Store
import { defineStore } from 'pinia'const useUser = defineStore("user", { state: () => ({ name: "why", age: 18, level: 100 })})export default useUser
2)三种修改state的方式
<script setup> import useUser from '@/stores/user' import { storeToRefs } from 'pinia'; const userStore = useUser() const { name, age, level } = storeToRefs(userStore) function changeState() { // 1.一个个修改状态 // userStore.name = "kobe" // userStore.age = 20 // userStore.level = 200 // 2.一次性修改多个状态 // userStore.$patch({ // name: "james", // age: 35 // }) // 3.替换state为新的对象 const oldState = userStore.$state userStore.$state = { name: "curry", level: 200 } // 下面会返回true console.log(oldState === userStore.$state) }</script>
4.5 重置store
<script> import useCounter from '@/stores/counter'; const counterStore = useCounter() counterStore.$reset()</script>
五、getters的使用
Getters
相当于Store
的计算属性:
它可以用
defineStore()
中的getters
属性定义;getters
中可以定义接受一个state
作为参数的函数;
5.1 定义getters
// 定义关于counter的storeimport { defineStore } from 'pinia'const useCounter = defineStore("counter", { state: () => ({ count: 99 }), getters: { // 基本使用 doubleCount(state) { return state.count * 2 }, // 2.一个getter引入另外一个getter doubleCountAddOne() { // this是store实例,可以直接使用另一个getter return this.doubleCount + 1 }, // 3.getters也支持返回一个函数 getFriendById(state) { return function(id) { for (let i = 0; i < state.friends.length; i++) { const friend = state.friends[i] if (friend.id === id) { return friend } } } }, },})export default useCounter
5.2 访问getters
<template> <div class="home"> <!-- 在模板中使用 --> <h2>doubleCount: {{ counterStore.doubleCount }}</h2> <h2>doubleCountAddOne: {{ counterStore.doubleCountAddOne }}</h2> <h2>friend-111: {{ counterStore.getFriendById(111) }}</h2> </div></template><script setup> import useCounter from '@/stores/counter'; const counterStore = useCounter() // 在js文件中使用 const doubleCount = counterStore.doubleCount; const doubleCountAddOne = counterStore.doubleCountAddOne; const frend = counterStore.getFriendById(111)</script>
5.3 getters中获取另一个store中的state/getters数据
// 定义关于counter的storeimport { defineStore } from 'pinia'// 引入另一个storeimport useUser from './user'const useCounter = defineStore("counter", { state: () => ({ count: 99, }), getters: { // 4.getters中用到别的store中的数据 showMessage(state) { // 1.获取user信息 const userStore = useUser() // 2.获取自己的信息 // 3.拼接信息(使用另一个store中的数据) return `name:${userStore.name}-count:${state.count}` } }})export default useCounter
六、actions的使用
actions
相当于组件中的 methods
。
可以使用defineStore()
中的actions
属性定义,并且它们非常适合定义一些业务逻辑。
和getters
一样,在action
中可以通过this
访问整个store
实例的所有操作。
6.1 基本定义方式
// 定义关于counter的storeimport { defineStore } from 'pinia'const useCounter = defineStore("counter", { state: () => ({ count: 99, }), // 定义actions actions: { increment() { this.count++ }, incrementNum(num) { this.count += num } }})export default useCounter
6.2 基本使用方式
<template> <div class="home"> <h2>doubleCount: {{ counterStore.count }}</h2> <button @click="changeState">修改state</button> </div></template><script setup> import useCounter from '@/stores/counter'; const counterStore = useCounter() function changeState() { // 可以通过counterStore对象直接使用 // counterStore.increment() counterStore.incrementNum(10) }</script>
6.3 Actions中的异步操作
import { defineStore } from 'pinia'const useHome = defineStore("home", { state: () => ({ banners: [], recommends: [] }), actions: { async fetchHomeMultidata() { const res = await fetch("http://123.207.32.32:8000/home/multidata") const data = await res.json() //得到数据后直接复制给state this.banners = data.data.banner.list this.recommends = data.data.recommend.list return 'success' } }})export default useHome
6.4 调用异步actions方法
<script setup> import useHome from '@/stores/home'; const homeStore = useHome() homeStore.fetchHomeMultidata().then(res => { console.log("fetchHomeMultidata的action已经完成了:", res) })</script>