网站用户登录流程图,济南小程序开发多少钱,威海网站开发公司,用word 做网站Pinia 是一个现代的状态管理库#xff0c;专为 Vue 3 设计。它提供了一种简单、直观的方式来管理应用中的全局状态 (就是不同组件都希望去共享的一些变量,函数等)。Pinia 的设计灵感来自于 Vuex#xff08;Vue 2 的状态管理库#xff09;#xff0c;但进行了许多改进#… Pinia 是一个现代的状态管理库专为 Vue 3 设计。它提供了一种简单、直观的方式来管理应用中的全局状态 (就是不同组件都希望去共享的一些变量,函数等)。Pinia 的设计灵感来自于 VuexVue 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 vueexport 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 读取
templateh2当前求和为{{ personStore.sum }}/h2button clickplus(3)点我sum3/buttonh2当前年龄为{{ age }}/h2h2bigSum为 {{ bigSum }}/h2span看看名字/spaninput typetext v-modelpersonStore.name
/templatescript langts 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)/scriptstore里面的数据均为响应式数据且是全局共享的,因此我们像平常对待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一个数组包含触发状态变化的事件。storeIdstore 的唯一标识符。type变化的类型通常是 direct 或 patch object。payload变化的具体内容例如更新的对象或函数。
state: 当前 store 的状态。这是一个包含所有状态属性(state)的对象。
这里我修改了name,从Eve变成了Evea, 值得注意的是mutation.events里面的 key , newValue 和 oldValue ,可以取出来做一些操作
