什么是？--Vuex的替代品；PiniaPinia实操配置

灰太狼 2024-04-07 12:37 97阅读 0赞

技术更新迭代快，学习要永不停步！

#### Pinia实操 ####

*  什么是Pinia？
 *   *  与Vuex相比的优势
 *  创建store并使用
 *   *  1. 搭建项目并安装Pinia
     *  2. 创建一个store
     *   *  1、首先在main.js中引入pinia
         *  2、在src目录下创建一个store文件夹，并新建index.js，写入以下内容：
         *  3、在组件中使用
 *  修改store
 *   *  1. 直接修改
     *  2. 调用$patch
     *  3. $patch加函数的形式修改状态数据
     *  4. 替换state
     *  5. 通过action修改
     *  6. 重置store
 *  getters的使用
 *  store间互相调用
 *  数据持久化

## 什么是Pinia？ ##

![在这里插入图片描述][c8719f82e0864b458f8987ff89e4d6d9.png]  
就是这个菠萝（一种美味的热带水果）

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态；  
Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。

现在官方网站的生态推荐已经将Vuex换成了Pinia

### 与Vuex相比的优势 ###

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。  
总结以下五点：

1.  可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。
2.  抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。
3.  不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
4.  完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化，一定知道Vuex对TS的语法支持不是完整的（经常被吐槽）。
5.  代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割，pinia也同样继承了这个优点。

## 创建store并使用 ##

### 1. 搭建项目并安装Pinia ###

项目搭建不再赘述  
执行安装Pinia

yarn add pinia
    // or
    npm i pinia

### 2. 创建一个store ###

#### 1、首先在main.js中引入pinia ####

import {
         createApp } from 'vue'
    import App from './App.vue'
    import {
         createPinia } from 'pinia'//创建一个 pinia（根存储）并将其传递给应用程序：
    createApp(App).use(createPinia()).mount('#app')

#### 2、在src目录下创建一个store文件夹，并新建index.js，写入以下内容： ####

import {
         defineStore } from 'pinia'
    
    // useStore 可以是 useUser、useCart 之类的任何东西
    // 第一个参数是应用程序中 store 的唯一 id
    export const useStore = defineStore('main', {
        
      // other options...
      state: () => {
        
        return {
        
          msg: 'hello world!',
          count: 0
        }
      },
      getters: {
        },
      actions: {
        }
    })

defineStore()	定义Store，并且它需要一个唯一名称，作为第一个参数传递
    参数：
    第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。
    第二个参数：一个配置对象，里边是对容器仓库的配置说明。
    	state 属性： 用来存储全局的状态的
    	getters属性： 类似计算属性，用来监视或者说是计算状态的变化的，有缓存的功能。
    	actions属性： 修改state，对state里数据变化的业务逻辑，需求不同，编写逻辑不同。

#### 3、在组件中使用 ####

两种方法  
第一种：之间使用整个store取值  
第二种：结构取值，但不要直接结构store

storeToRefs：为了从 Store 中提取属性同时保持其响应式， 它将为任何响应式属性创建 refs

示例：

<template>
      <div>{
       { store.msg }}</div>
      <div>{
       { msg }}</div>
    </template>
    
    <script setup>
    import {
           useStore } from '@/store/index';
    import {
           storeToRefs } from "pinia";
    let store = useStore()
    // 不要直接结构，会破坏响应式，使用storeToRefs
    // const { msg } = store;
    const {
           msg } = storeToRefs(store);
    </script>

## 修改store ##

修改方法有5种

### 1. 直接修改 ###

<template>
      <div>{
       { store.count }}</div>
      <button @click="add">+1</button>
    </template>
    
    <script setup>
    import {
           useStore } from '@/store/index';
    let store = useStore()
    const add = () => {
          
      store.count++
    }
    </script>

### 2. 调用$patch ###

这个方法可以修改多个状态

$patch与直接进行两次修改的好处在哪里？
    
    Pinia的官方网站，已经明确表示$patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。
    所以如果你是多条数据同时更新状态数据，推荐使用$patch方式更新。

### 3. $patch加函数的形式修改状态数据 ###

这种方法适合复杂数据的修改，比如数组、对象的修改,因为它们的修改非常困难或代价高昂

首先我们在useStore中增加一个数组一个对象

import {
         defineStore } from 'pinia'
    
    export const useStore = defineStore('main', {
        
      state: () => {
        
        return {
        
          msg: 'hello world!',
          count: 0,
          userInfo: {
        
            name:'张三'
          },
          userItems: []
        }
      },
      getters: {
        },
      actions: {
        }
    })

然后执行修改

const add = () => {
        
      store.$patch((state) => {
        
        state.userItems.push({
         name: 'shoes', quantity: 1 }),
        state.userInfo.name = '李四'
      })
    }

### 4. 替换state ###

可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态：

store.$state = {
         counter: 666, name: 'Paimon' }

### 5. 通过action修改 ###

当逻辑复杂，不直接进行修改，那就用action

首先在useStore中添加action

actions: {
        
        changeCount() {
        
          // 通过this取值改值，所以不要使用箭头函数
          this.count++
        }
      }

然后进行使用

const add = () => {
        
      store.changeCount()
    }

### 6. 重置store ###

可以通过调用 store 上的 方法将状态 重置 到其初始值

const store = useStore()
    store.$reset()

## getters的使用 ##

首先添加

getters: {
        
        tenCount(){
        
          return this.count*10
        }
        // 这种方便ts进行类型推断
        // tenCount(state){
        
        //   return state.count*10
        // }
      },

使用

<div>{
       { store.tenCount }}</div>

## store间互相调用 ##

![在这里插入图片描述][133a3b1c2bad492b86501d609a10f380.png]  
Pinia不再有modules的嵌套结构  
所以你可以灵活使用每一个store，它们是通过扁平化的方式来相互使用的；

首先在store文件夹中创建user.js,写入以下内容：

import {
         defineStore } from 'pinia'
    
    export const useUser = defineStore('user', {
        
        state: () => {
        
            return {
        
                name: '张三'
            }
        }
    })

接下来在useStore中调用

最后你就可以在组件中去调用getUser了

## 数据持久化 ##

使用pinia-plugin-persist插件实现数据持久化

1、 安装

npm i pinia-plugin-persist

2、 在main.js中引入

import {
         createApp } from 'vue'
    import App from './App.vue'
    import {
         createPinia } from 'pinia'
    import piniaPersist from 'pinia-plugin-persist'
    
    let pinia = createPinia()
    pinia.use(piniaPersist)
    
    createApp(App).use(pinia).mount('#app')

3、 在store中配置

import {
         defineStore } from 'pinia'
    import {
         useUser } from './user';// 导入useUser
    export const useStore = defineStore('main', {
        
      state: () => {
        
        return {
        
          msg: 'hello world!',
          count: 0
        }
      },
      getters: {
        
        getUser() {
        
          return useUser().name;// 取值
        }
      },
      actions: {
        },
      persist: {
        
        enabled: true, // 开启缓存  默认会存储在本地localstorage
        storage: sessionStorage, // 缓存使用方式
        paths:[] // 需要缓存键 
      }
    })

这样数据就可以实时的存储到storage中

[c8719f82e0864b458f8987ff89e4d6d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3d7ea9b5ffc94f6f917b3664a631365f.png
[133a3b1c2bad492b86501d609a10f380.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/cd6b07b6a1da4f109bc76ecab86340ce.png