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

曾经终败给现在 2024-04-03 10:50 90阅读 0赞

### 一、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的store
    import {
         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>
        
        <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的方式**

#### 4.5 重置store ####

### 五、getters的使用 ###

`Getters`相当于`Store`的计算属性：

*  它可以用`defineStore()`中的`getters`属性定义；
 *  `getters`中可以定义接受一个`state`作为参数的函数；

#### 5.1 定义getters ####

// 定义关于counter的store
    import {
         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的store
    import {
         defineStore } from 'pinia'
    
    // 引入另一个store
    import 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的store
    import {
         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方法 ####