Vue3 pinia使用
Pinia 是一个现代的状态管理库，专为 Vue 3 设计。它提供了一种简单、直观的方式来管理应用中的全局状态 (就是不同组件都希望去共享的一些变量,函数等)。Pinia 的设计灵感来自于 Vuex（Vue 2 的状态管理库），但进行了许多改进，使其更易于使用和理解。
pinia的核心是store (仓库), 他很类似于hooks,不过hooks作用域是组件内部。每个组件实例都有自己的状态和逻辑，即使多个组件使用相同的组合式 API 函数，它们之间的状态也是隔离的。
而store作用域是全局的。一旦你定义了一个 store，任何组件都可以通过注入来访问和修改这个 store 的状态。
Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。
1. 安装与配置
第一步,控制台 npm install pinia
第二步,使用pinia 由于pinia是分别暴露,所以记得加花括号
import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')2. Store如何编写
pinia中核心就是store,他就是存储共享数据的地方,根据官方推荐,store文件应该位于src/store下,名字最好与主要对应的组件的名字相同。 如count.vue中如果有变量需要全局共享,应该写在src/store/count.ts 文件中
pinia支持选项式写法,也支持组合式 2.1讲选项式 2.2讲组合式, 如果你非常熟悉vue3的hooks文件的写法,那么可以直接看2.2及之后, store和hooks基本是相同的
它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。
2.1 选项式写法
比如我写一个 src/store/person.ts
// 引入defineStore用于创建store
import { defineStore } from 'pinia'// 定义并暴露一个store 这里起名规则推荐像hooks, useXXXStore
// 注意,在选项式写法的defineStore里面,是可以有this的
export const usePersonStore = defineStore('person', {// 动作 ( 里面放想要共享的函数/方法 )actions: {plus(value: number) {//操作countStore中的sumthis.sum += value}},// 状态 ( 也就是共享的变量 ) 一定要写在return里面state() {return {sum: 6,name: 'Eve',age: 18}},// 计算 ( 跟vue中的计算属性一样,但是也是共享的 )getters: {bigSum: (state): number => state.sum * 10,upperName(): string {return this.name.toUpperCase()}}
})2.2 组合式写法 (个人更喜欢)
import { defineStore } from 'pinia'
import { computed, reactive, ref } from 'vue'export const usePersonStore = defineStore('person', () => {// 直接定义变量 就是stateconst sum = ref(6)const name = ref('Eve')const age = ref(18)// 函数相当于actionfunction plus(value: number) {sum.value += value}// 计算属性就相当于是getterconst bigSum = computed(() => { return sum.value * 10 })const upperName = computed(() => { return name.value.toUpperCase() })//但是这里必须需要return暴露出去return { sum, name, age, plus, bigSum,upperName}
})
3. 读取与修改数据
在需要使用共享数据的地方,我们引入我们的store
3.1 读取
<template><h2>当前求和为：{{ personStore.sum }}</h2><button @click="plus(3)">点我sum+3</button><h2>当前年龄为：{{ age }}</h2><h2>bigSum为 {{ bigSum }}</h2><span>看看名字</span><input type="text" v-model="personStore.name">
</template><script lang="ts" setup>
// 引入对应的Store
import { usePersonStore } from '@/store/person'
import { storeToRefs } from 'pinia'// 调用useXxxxxStore得到对应的store
const personStore = usePersonStore()// 1 直接获取 但赋值的变量就不再是响应式的了
// 可以直接在插值语法的地方写personStore.sum,依然是响应式
const sum = personStore.sum
const plus = personStore.plus// 2 解构 仍然是响应式的
const { age ,bigSum} = storeToRefs(personStore)</script>
store里面的数据均为响应式数据且是全局共享的,因此我们像平常对待ref和reactive一样去修改就可以了。 但是注意解构的时候使用storeToRefs比较好
pinia提供的storeToRefs只会将数据(自己定义的那些contents,getter,不包括action)做转换，而Vue的toRefs会转换store中的全部数据(包括很多无关数据)。
3.2 修改
// 1.直接赋值修改personStore.sum = 666// 2.批量修改 (只能修改content,也就是变量,不能修改方法)
// 传入的参数是content包含变量的子集
personStore.$patch({age:25,sum:999
})
// 3.调用action来修改personStore.plus(0.1)4. 订阅 (监视)
在引入了store的vue组件中,我们可以通过store.$subscribe来监视store中变量的变化
personStore.$subscribe((mutate,state)=>{console.log("@@",mutate)console.log("!!",state)// 其他逻辑操作
})mutation： 包含有关状态变化的信息。mutation 对象通常包括以下属性
events：一个数组，包含触发状态变化的事件。storeId：store 的唯一标识符。type：变化的类型，通常是"direct"或"patch object"。payload：变化的具体内容，例如更新的对象或函数。
state: 当前 store 的状态。这是一个包含所有状态属性(state)的对象。
这里我修改了name,从Eve变成了Evea,
值得注意的是mutation.events里面的 key , newValue 和 oldValue ,可以取出来做一些操作
