Vue--》探索Pinia:Vue状态管理的未来

目录

Pinia的讲解与使用

Pinia的安装与使用

store数据操作

解构store数据

actions-getters的使用

Pinia常用API

持久化插件


Pinia的讲解与使用

Pinia 是由 Eduardo San Martin Morote 创建的,这是一个轻量级的、使用 Vue3 Composition API 的状态管理库。Pinia 于2020年8月正式发布,也就是在 Vue 3.0.0 版本推出后不久,可以说是比较新的一个状态管理解决方案。虽然 Pinia 是一种相对较新的解决方案,但它受到了许多 Vue.js 开发者的青睐,并在许多项目中得到广泛应用。

Vue--》探索Pinia:Vue状态管理的未来

官方文档为:https://pinia.vuejs.org/zh/introduction.html ,从官网的图示我们不难看出,Pinia是专为 Vue.js 框架设计的状态管理解决方案,其核心是建立在 Vue 3 Composition API 之上的。因此Pinia 不能直接用于使用其他框架的项目。

但是,Pinia 可以与其他框架和库一起使用,例如在通过 Vue.js 构建的应用程序中,如果需要在 React 组件中使用 Pinia 中的状态,可以使用 Vue.js 手动渲染 React 组件的方法来实现。但是这种使用方式需要额外处理,使用起来可能会有一定的挑战性。如果你正在使用React,可以考虑使用专为React设计的状态管理方案,比如Redux,Mobx, Recoil等等。

那么我们在项目中该如何选择合适的状态管理工具进行使用?也就是说Pinia和Vuex的区别和应用场景到底有什么区别,别急,等我慢慢道来。

Pinia 和 Vuex 是 Vue.js 框架中两种常见的状态管理解决方案。它们都是用于管理响应式状态,但存在一些区别。如下:

API 的不同

Pinia 提供了一个更简单、更直接、易于理解的 API;而 Vuex 的 API 更加灵活,但也更为复杂,需要花费更多的时间学习。

全局状态的处理不同

在 Vuex 中有一个全局的 store(仓库),用于存储应用程序中的所有状态,而 Pinia 中则是一个基于类的 API,每个组件实例均有自己的 Pinia store,这使得应用程序的状态管理更加灵活、容易。此外,Pinia 还具有更好的 TypeScript 支持。

API 实时性的差异

在 Pinia 中,所有 getter 和 action 都会被实时更新,而在 Vuex 中只有 getter 会被实时更新,action 不会。

那么Pinia到底有啥特点能够吸引Vue开发者的对其竞相追逐呢?如下:

1)Pinia 是使用 TypeScript 编写的,它充分利用了 TypeScript 强类型系统的优点,提供了更好的类型声明和类型检查能力。

2)Pinia 的代码结构更加简洁明了,由于 Vue.js 3 在状态管理方面提供了更好的支持,Pinia 可以借助 Vue.js 3 的一些新特性来实现更简单、更直观的状态管理方案。

3)Pinia 支持插件,它提供了一个插件 API,可以将它与其他库和工具集成使用,如 devtools、vuex-persistedstate 等。

4)Pinia 通过提供 API 来支持响应式和异步操作,是一个更加灵活和可配置的状态管理方案。

5)在使用 Pinia 时,不需要像 Vuex 一样集中式地管理所有的状态,而是可以分成多个 Store,每个 Store 可以管理自己相关的状态。这种分离使代码结构更加清晰,易于维护。

总之,Pinia 相较于 Vuex 更加简单方便,不需要使用复杂的 API 和语法来管理应用状态,它还能够适应更广泛的应用场景,而 Vuex 则更加适用于复杂的状态管理需求。

Pinia的安装与使用

这里我采用的是vite构建工具进行创建的 vue3 最新项目,并结合TS的语言支持,如果你想在vue2中使用pinia,可自行查阅官网,这里不再赘述。如果不了解vite构建工具的朋友推荐看一下我之前讲解的文章:vite脚手架的搭建与使用 ,当然如果你是现成已经创建好的项目,直接执行如下命令安装库即可,这里不再赘述。

创建完项目后,终端执行如下命令进行安装Pinia库:

npm install pinia

安装完成之后,我们就可以在main.ts中进行引入Pinia相关配置代码,创建一个 pinia 实例 (根 store) 并将其传递给应用,如下:

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const store = createPinia()
let app = createApp(store)
app.use(store)
createApp(App).mount('#app')

初始化仓库store: Store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。一般我们通常在 src 目录下新建文件夹 store ,里面存放中我们初始化仓库的文件代码:

在Pinia中 store是用defineStore()定义的,它的第一个参数是一个独一无二的名字,作为store中的唯一ID,Pinia 将用它来连接 store 和 devtools。为了方便处理ID,我将其单独抽离出来一个文件,用来枚举所有的pinia仓库ID,如下:

export const enum Names {
  Student = 'Student'
}

在store文件夹下新建index.ts文件,用来存放数据和操作的数据的方法:

import { defineStore } from "pinia";
import { Names } from "./storeName";
// 将返回的函数命名为 use... 是一个符合组合式函数风格的约定。
export const useStudentStore = defineStore(Names.Student,{
  state:()=>({
    name:'张三',
    age:18
  })
})

在App.vue中我们进行引入store并将store中的数据进行渲染到界面上:

<template>
  <div class="">
    Pinia:{{ Student.age }}
  </div>
</template>
<script setup lang="ts">
import { useStudentStore } from "./store"
const Student = useStudentStore()
</script>

Vue--》探索Pinia:Vue状态管理的未来

在 vue 开发者工具中我们也可以看到我们创建的pinia数据。

Vue--》探索Pinia:Vue状态管理的未来

store数据操作

直接修改

在pinia中我们可以直接对store中的数据进行操作,不再像vuex一样需要借助action才能进行:

<template>
  <div class="">
    Pinia:{{ Student.age }}
    <button @click="change">修改</button>
  </div>
</template>
<script setup lang="ts">
import { useStudentStore } from "./store"
const Student = useStudentStore()
const change = () =>{ 
  Student.age++
}
</script>

Vue--》探索Pinia:Vue状态管理的未来

$patch函数修改

如果想批量修改数据的话可以借助store身上的一个 $patch 函数,传入一个对象进行批量修改:

<template>
  <div class="">
    Pinia:{{ Student.name }}
    Pinia:{{ Student.age }}
    <button @click="change">修改</button>
  </div>
</template>
<script setup lang="ts">
import { useStudentStore } from "./store"
const Student = useStudentStore()
const change = () =>{ 
  Student.$patch({
    name:'李四',
    age:20
  })
}
</script>

Vue--》探索Pinia:Vue状态管理的未来

当然也可以采用函数式写法:

Vue--》探索Pinia:Vue状态管理的未来

$state函数修改

当然也可以采用$state函数进行修改,但是缺陷是必须将state对象中的所有数据都进行修改,不能只单独修改某一个。

Vue--》探索Pinia:Vue状态管理的未来

action函数修改

这里也可以借助store代码中的actions方法进行操作state中的数据,如下:

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

解构store数据

当我们使用store时,也可以采用解构方式,但是解构出来的store数据是非响应式的,如下:

<template>
  <div class="">
    Pinia:{{ Student.name }}
    Pinia:{{ Student.age }}
    <p>解构后的数据</p>
    Pinia:{{ name }}
    Pinia:{{ age }}
    <button @click="change">修改</button>
  </div>
</template>
<script setup lang="ts">
import { useStudentStore } from "./store"
const Student = useStudentStore()
const { name,age } = Student
const change = () =>{ 
  Student.setChange('小张',10)
}
</script>

Vue--》探索Pinia:Vue状态管理的未来

如果想将解构后的数据设置为响应式,可以采取这种方式

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

actions-getters的使用

在pinia中actions属性中可以调用同步函数和异步函数,如下:

同步函数的简单使用

import { defineStore } from "pinia";
import { Names } from "./storeName";
type User = {
  name:string,
  age:number
}
let result:User = {
  name:'小王',
  age:100
}
// 将返回的函数命名为 use... 是一个符合组合式函数风格的约定。
export const useStudentStore = defineStore(Names.Student,{
  state:()=>({
    person:<User>{}
  }),
  actions:{
    setChange(){
      this.person = result
    }
  }
})

在App.vue中直接调用函数即可:

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

异步函数的简单使用

import { defineStore } from "pinia";
import { Names } from "./storeName";
type User = {
  name:string,
  age:number
}
const Login = ():Promise<User>=>{
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve({
        name:'小明',
        age:100
      })
    },2000)
  })
}
// 将返回的函数命名为 use... 是一个符合组合式函数风格的约定。
export const useStudentStore = defineStore(Names.Student,{
  state:()=>({
    person:<User>{},
    name:'老王'
  }),
  actions:{
    async setChange(){
      const result = await Login( )
      this.person = result
      this.setName('小王')
    },
    setName(name:string){
      this.name = name
    }
  }
})

Vue--》探索Pinia:Vue状态管理的未来

在pinia中getters属性中可以修饰一些值,如下:

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

Pinia常用API

pinia给我们也提供了一些常用的API,便捷我们日常的开发,如下:

$reset:重置state状态数据

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

$subscribe:响应state的变化

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

$onAction:响应actions的变化

Vue--》探索Pinia:Vue状态管理的未来

Vue--》探索Pinia:Vue状态管理的未来

持久化插件

pinia和vuex都有一个通病,就是页面一旦刷新数据就会丢失,我们希望刷新页面之后,数据将会在页面中进行保留,详情代码都放置在 mian.ts 中,如下:

import { createApp,toRaw } from 'vue'
import App from './App.vue'
import { createPinia, PiniaPluginContext } from 'pinia'
const setStorage = (key:string,value:any) => {
  localStorage.setItem(key,JSON.stringify(value))
}
const getStorage = (key:string) =>{ 
  return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
}
type options = {
  key?:string
}
const __piniakey__:string = 'null'
const piniaPlugin = (options:options) => {
  return (context:PiniaPluginContext) => {
    const { store } = context
    const data = getStorage(`${options?.key ?? __piniakey__}-${store.$id}`)
    store.$subscribe(()=>{
      setStorage(`${options?.key ?? __piniakey__}-${store.$id}`,toRaw(store.$state))
    })
    console.log(store,'store')
    return {
      ...data
    }
  }
}
const store = createPinia()
store.use(piniaPlugin({
  key:'pinpa'
}))
let app = createApp(store)
app.use(store)
createApp(App).mount('#app')

Vue--》探索Pinia:Vue状态管理的未来

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。