Pinia状态管理
创始人
2024-06-01 01:20:14
0

Pinia与Vuex对比

什么是Pinia

  • 2019年,为Vue重新设计状态管理,让它用来像组合式API
  • 最初的设计原则依然相同,并且同时兼容Vue2、Vue3
  • 本质上依然是一个状态管理的库,用于跨组件、页面进行状态共享

Pinia图标

在这里插入图片描述

Pinia与Vuex的区别

  • 与Vuex相比,Pinia提供了一个更简单的API,具有更少的仪式,提供了组合式API风格的API
  • 与TypeScript一起使用时具有可靠的类型推断支持
  • 优势:1、比如Mutations不再存在;2、更友好的TypeScript支持; 3、不再有modules的嵌套结构;4、也不再有命名空间的概念不需要记住它们的复杂关系

创建Pinia的Store

认识Store

  1. 一个实体,持有为绑定到你组件树的状态和业务逻辑,即保存了全局的状态
  2. 始终存在,并每个都可以读取和写入的组件
  3. 可以在你的应用程序中定义任意数量的Store来管理你的状态

Pinia三个核心概念

  • state、getters、actions等同于等同与组件中的data、computed、methods
  • 一旦store 被实例化,你就可以直接在store上访问state、getters、actions中的任何属性

定义一个Store

  • 我们知道Store是使用defineStore() 定义的
  • 并且它需要一个唯一名称,作为第一个参数传递
// 返回一个函数,该函数的命名有自己的规范
const useCounter = defineStore("counter", {state: () => ({count: 99, })
})
  • 这个name,也称为id,是必要的,Pinia使用它来将Store连接到devtools
  • 返回的函数,统一使用useX作为命名方案,这是约定的规范

使用定义的Store

  • Store在它被使用之前是不会创建的,我们可以通过调用use函数来使用Store

  • 以上代码需要注意的是:Store获取到后不能被解构时,会失去响应式;为了从Store中提取属性同时保持其响应式,需要使用storeToRefs()
const { count } = counterStore // 不是响应式的
// 原来的响应式的方式
// const { count } = toRefs(counterStore) 
// 现pinia的响应式的方式
const { count } = storeToRefs(counterStore)

Pinia核心概念State

  • state是store的核心部分,因为store是用来帮助我们管理状态的
  • 在pinia中,状态被定义为返回初始状态的函数
const useUser = defineStore('user', {state: () => ({name: 'why',age: 18,level: 100})
})

操作State(一)

读取和写入state

  • 默认情况下,您可以通过store实例访问状态来直接读取和写入状态
	const userStore = useUser()const { name, age, level } = storeToRefs(userStore)function changeState() {// 1、一个个修改状态// userStore.name = 'kobe'// userStore.age = 24// userStore.level = 200 
}

重置State

  • 可以通过调用store上的$reset() 方法将状态重置到其初始值
function resetState() {// 将原来的状态返回userStore.$reset() }

操作State(二)

改变State

  • 除了直接用store.counter++修改store,还可以使用$patch方法
  • 它允许你使用部分“state”对象同时应用多个更改
// 2、一次性修改多个状态
// userStore.$patch({
//     name:'james', 
//     age:35
// })

替换State

  • 你可以通过将其$state属性设置为新对象来替换整个store的整个状态
// 替换state为新的对象
userStore.$state = {name:'curry', level:200
}

Pinia核心概念Getters

认识和定义Getters

Getters相当于Store的计算属性

  • 它可以用defineStore()中的getters属性定义
  • getters中可以定义接受一个state作为参数的函数
getters: {// 1、基本使用,你要对state操作,必须传入statedoubleCount(state) {return state.count * 2 // 这里也可以通过this来访问},doubleCount: (state) => state.counter * 2
}

访问Getters(一)

  • 访问当前store的Getters
const countStore = useCounter() 
console.log(countStore.doubleCount)
  • Getters中访问自己的其他Getters
  • 我们可以通过this来访问到当前store实例的所有其他属性
// 2、在一个getter引入另一个getter
doubleCountAddOne() {// this就是store实例return this.doubleCount + 1
},
  • 访问其他store中的Getters
// pinia拥有扁平化的特点,意味着每个东西都是独立的
import useUser from "./user";// 返回一个函数,该函数的命名有自己的规范
const useCounter = defineStore("counter", {state: () => ({count: 99,friends: [{ id: 111, name: 'why' },{ id: 112, name: 'kobe' },{ id: 113, name: 'james' }]}),getters: {// 4、getters中用到了别的store中的数据showMessage(state) {// 1、先获取user信息const userStore = useUser()// 2、获取自己的信息// 3、拼接信息return `name:${userStore.name}-count:${state.count}`}}

访问Getters(二)

  • Getters也可以返回一个函数,这样就可以接受参数
// 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}}}
},// 在别的组件中使用的时候,可以直接传入参数

Pinia核心概念Actions

认识和定义Actions

Actions相当于组件中的methods

  • 可以使用defineStore() 中的actions属性定义,并且它们非常适合定义业务逻辑(通常是一些网络请求的业务逻辑)
  • 和getters一样,在actions中可以通过this访问整个store实例的所有操作
// counter.js
actions:{increment(num) {// console.log(state) // undefinedthis.count += num}}// home.jsactions:{async fetchHomeMultidata() {const res = await fetch("http://123.207.32.32:8000/home/multidata")const data = await res.json() // console.log(data)this.banners = data.data.banner.listthis.recommends = data.data.recommend.list// 类似于return undefined// return Promise.resolve(undefined)// 也可以// return new Promise(async(resolve, reject))}}// 在别的组件中使用
// axios中的业务逻辑一般指的是网络请求等
const homeStore = useHome()
// homeStore.fetchHomeMultidata()
// 通过homeStore可以获取到异步数据
homeStore.fetchHomeMultidata().then(console.log('请求已经完成')
)

Github代码演练🔗

pinia练习

相关内容

热门资讯

安卓系统弹出窗口问题,安卓系统... 手机里的安卓系统突然弹出窗口,是不是让你心头一紧,手忙脚乱?别急,今天就来和你聊聊这个让人头疼的安卓...
安卓系统加苹果战队,科技竞技的... 你知道吗?在科技的世界里,有一场特别的较量正在悄然上演。那就是安卓系统和苹果战队的对决!这两大操作系...
miui与安卓系统关系,深度定... 亲爱的读者,你是否曾在使用手机时,对那熟悉的MIUI界面感到亲切又好奇?今天,就让我们一起揭开MIU...
安卓原生系统手机哪些,探索安卓... 你有没有想过,为什么你的手机总是那么流畅,那么强大?这背后,可是有一个默默无闻的英雄——安卓原生系统...
安卓系统cpu天梯图,性能比拼... 你有没有发现,手机里的安卓系统,就像是我们的好朋友,每天都在默默无闻地工作着。而它的心脏,也就是CP...
安卓系统通知时间,掌握生活节奏... 你有没有发现,手机里的安卓系统通知时间有时候会让人有点头疼呢?有时候它准时得像军号,有时候又懒洋洋得...
安卓系统默认安装位置,默认安装... 你有没有发现,每次新买一台安卓手机,打开它的时候,那些默认安装的APP总是占据着固定的位置?是不是好...
安卓系统内存优化模式,高效运行... 手机用久了是不是感觉越来越卡?别急,今天就来给你揭秘安卓系统内存优化模式的秘密,让你的手机焕发新生!...
零信任软件安卓系统,零信任软件... 你知道吗?在科技飞速发展的今天,手机已经成为了我们生活中不可或缺的一部分。而在这其中,安卓系统凭借其...
怎样更改安卓系统时间,安卓系统... 手机时间不对了?别急,我来教你怎样更改安卓系统时间,让你手机上的时间瞬间回到正轨!一、直接调整系统时...
鸿蒙系统离不开安卓,基于安卓的... 你知道吗?最近在科技圈里,有一个话题可是引起了不小的讨论呢!那就是鸿蒙系统与安卓的关系。很多人都在问...
安卓系统怎么重启应用,安卓系统... 手机里的安卓应用突然卡住了,是不是让你头疼不已?别急,今天就来教你怎么轻松重启安卓系统中的应用,让你...
安卓系统开启远程登录,安卓系统... 你有没有想过,即使你不在家,也能轻松管理你的安卓设备呢?没错,就是安卓系统开启远程登录!这可是个超级...
黑域安卓系统4.0,创新功能与... 亲爱的读者们,你是否对安卓系统有所好奇?今天,我要带你深入探索一个神秘而独特的存在——黑域安卓系统4...
安卓系统基础教程,从入门到精通 你有没有想过,你的安卓手机里那些神奇的软件和功能是怎么来的呢?其实,这一切都离不开安卓系统的基础。今...
安卓系统盒子停服,回顾辉煌历程 你有没有发现,最近你的安卓系统盒子突然有点不对劲?是不是觉得它变得有点“懒”,不再像以前那样活泼了呢...
安卓系统怎么下蝙蝠,安卓系统下... 你有没有想过,在安卓手机上下载蝙蝠APP,竟然也能成为一门学问呢?没错,就是那个让你随时随地畅游网络...
安卓系统能播放蓝光,安卓系统轻... 你有没有想过,你的安卓手机或者平板,竟然能播放那些高清到让人惊艳的蓝光电影呢?没错,就是那种画质细腻...
汽车系统识别到安卓,智能驾驶新... 你知道吗?最近汽车界可是掀起了一股新潮流呢!那就是汽车系统识别到安卓,这可不是简单的兼容,而是深度融...
工程业务系统安卓版,助力项目管... 你知道吗?最近我在手机上发现了一个超级实用的工程业务系统安卓版,简直让我爱不释手!这款应用不仅功能强...