Vue状态管理--Pinia使用详解

一、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的支持很不友好
• 不再有modules的嵌套结构，可以灵活使用每一个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()exportdefault 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})})exportdefault 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})})exportdefault useUser

2）三种修改state的方式

<script setup>import useUser from'@/stores/user'import{ storeToRefs }from'pinia';const userStore =useUser()const{ name, age, level }=storeToRefs(userStore)functionchangeState(){// 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引入另外一个getterdoubleCountAddOne(){// this是store实例，可以直接使用另一个getterreturnthis.doubleCount +1},// 3.getters也支持返回一个函数getFriendById(state){returnfunction(id){for(let i =0; i < state.friends.length; i++){const friend = state.friends[i]if(friend.id === id){return friend
          }}}},},})exportdefault 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}`}}})exportdefault useCounter

六、actions的使用

actions

相当于组件中的

methods

。

可以使用

defineStore()

中的

actions

属性定义，并且它们非常适合定义一些业务逻辑。

和

getters

一样，在

action

中可以通过

this

访问整个

store

实例的所有操作。

6.1 基本定义方式

// 定义关于counter的storeimport{ defineStore }from'pinia'const useCounter =defineStore("counter",{state:()=>({count:99,}),// 定义actionsactions:{increment(){this.count++},incrementNum(num){this.count += num
    }}})exportdefault 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()functionchangeState(){// 可以通过counterStore对象直接使用// counterStore.increment()
    counterStore.incrementNum(10)}</script>

6.3 Actions中的异步操作

import{ defineStore }from'pinia'const useHome =defineStore("home",{state:()=>({banners:[],recommends:[]}),actions:{asyncfetchHomeMultidata(){const res =awaitfetch("http://123.207.32.32:8000/home/multidata")const data =await res.json()//得到数据后直接复制给statethis.banners = data.data.banner.list
      this.recommends = data.data.recommend.list
      
      return'success'}}})exportdefault useHome

6.4 调用异步actions方法

<script setup>import useHome from'@/stores/home';const homeStore =useHome()
  homeStore.fetchHomeMultidata().then(res=>{
    console.log("fetchHomeMultidata的action已经完成了:", res)})</script>