位置: IT常识 - 正文

Vue状态管理--Pinia使用详解(vue状态管理有哪些)

编辑:rootadmin
Vue状态管理--Pinia使用详解 一、Pinia概述

推荐整理分享Vue状态管理--Pinia使用详解(vue状态管理有哪些),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue状态管理工具有哪些,vue状态管理工具有哪些,vue状态管理pinia,vue状态管理是什么,vue状态管理工具,vue状态管理库 pinia,vue状态管理是什么,vue状态管理库 pinia,内容如对您有帮助,希望把文章链接给更多的朋友!

Pinia开始于大概2019年,最初作为一个实验为Vue重新设计状态管理,让它用起来像组合API。

Pinia本质上依然是一个状态管理的库,用于跨组件、页面进行状态共享(这点和Vuex、Redux一样)。

Pinia(发音为/piːnjʌ/,如英语中的peenya)是最接近piña(西班牙语中的菠萝)的词。

这可能也是Pinia的图标是一个菠萝的原因。

二、Pinia和Vuex的区别

Pinia最初是为了探索 Vuex 的下一次迭代会是什么样子,结合了 Vuex 5 核心团队讨论中的许多想法。

最终,团队意识到Pinia已经实现了Vuex5中大部分内容,所以最终决定用Pinia来替代Vuex。

和Vuex相比,Pinia有很多的优势:

mutations不再存在

更友好的TypeScript支持,Vuex之前对TS的支持很不友好

不再有modules的嵌套结构,可以灵活使用每一个store,它们是通过扁平化的方式来相互使用的

不再有命名空间的概念,不需要记住它们的复杂关系

三、Pinia的安装和基本配置3.1 安装Pinia# npm 方式npm install pinia# yarn 方式yarn add pinia3.2 创建一个pinia并且将其传递给应用程序1)新建store文件夹,在此文件夹下新建一个index.jsimport { createPinia } from 'pinia'//创建一个pinia实例const pinia = createPinia()export default pinia2)在main.js中use它import { createApp } from 'vue'import App from './App.vue'import pinia from './stores'createApp(App).use(pinia).mount('#app')

完成上述代码后,pinia在项目中就生效了

四、Pinia中的Store4.1 什么是Store?

一个Store (如Pinia)是一个实体,它会持有绑定到你组件树的状态和业务逻辑,即保存了全局的状态;

它有点像始终存在,并且每个人都可以读取和写入的组件;

你可以在你的应用程序中定义任意数量的Store来管理你的状态;

Store有三个核心概念: state、getters、actions。

等同于组件的data、computed、methods。

一旦 store 被实例化,你就可以直接在 store 上访问 state、getters 和 actions中定义的任何属性。

4.2 如何定义一个storeVue状态管理--Pinia使用详解(vue状态管理有哪些)

定义之前需要知道:

store 是使用 defineStore() 定义的

并且它需要一个唯一名称,作为第一个参数传递

这个 唯一名称name,也称为 id,是必要的,Pinia 使用它来将 store 连接到 devtools

返回的函数统一使用useX作为命名方案,这是约定的规范

具体示例:

定义一个counter.js,在里面定义一个store

// 定义关于counter的storeimport { defineStore } from 'pinia'const useCounter = defineStore("counter", { // 在 Pinia 中,状态被定义为返回初始状态的函数 state: () => ({ count: 99 })})export default useCounter

这里有一个注意点,就是defineStore函数的返回值的命名规则:

以use开头,加上传给defineStore函数的第一个参数组成,使用驼峰命名法。

这虽然不是强制,确是一个大家都遵守的规范。

4.3 使用store读取和写入 state:<template> <div class="home"> <h2>Home View</h2> <!-- 2.使用useCounter的实例获取state中的值 --> <h2>count: {{ counterStore.count }}</h2> <h2>count: {{ count }}</h2> </div></template><script setup> import useCounter from '@/stores/counter'; import { storeToRefs } from 'pinia' // 1.直接使用useCounter获取counter这个Store的实例 // 这个函数名称取决于defineStore的返回值 const counterStore = useCounter() // 使用storeToRefs对数据进行结构,让count保持响应式的效果 const { count } = storeToRefs(counterStore) // 3.修改(写入)store counterStore.count++ </script>

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

Pinia中可以直接使用store实例去修改state中的数据,非常方便。

注意:

store获取到后不能被解构,因为会让数据失去响应式。

为了从 store中提取属性同时保持其响应式,需要使用storeToRefs()。

4.4 修改state的多种方式

1)定义一个关于user的Store

import { defineStore } from 'pinia'const useUser = defineStore("user", { state: () => ({ name: "why", age: 18, level: 100 })})export default useUser

2)三种修改state的方式

<script setup> import useUser from '@/stores/user' import { storeToRefs } from 'pinia'; const userStore = useUser() const { name, age, level } = storeToRefs(userStore) function changeState() { // 1.一个个修改状态 // userStore.name = "kobe" // userStore.age = 20 // userStore.level = 200 // 2.一次性修改多个状态 // userStore.$patch({ // name: "james", // age: 35 // }) // 3.替换state为新的对象 const oldState = userStore.$state userStore.$state = { name: "curry", level: 200 } // 下面会返回true console.log(oldState === userStore.$state) }</script>4.5 重置store<script> import useCounter from '@/stores/counter'; const counterStore = useCounter() counterStore.$reset()</script>五、getters的使用

Getters相当于Store的计算属性:

它可以用defineStore()中的getters属性定义;

getters中可以定义接受一个state作为参数的函数;

5.1 定义getters// 定义关于counter的storeimport { defineStore } from 'pinia'const useCounter = defineStore("counter", { state: () => ({ count: 99 }), getters: { // 基本使用 doubleCount(state) { return state.count * 2 }, // 2.一个getter引入另外一个getter doubleCountAddOne() { // this是store实例,可以直接使用另一个getter return this.doubleCount + 1 }, // 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 } } } }, },})export default useCounter5.2 访问getters<template> <div class="home"> <!-- 在模板中使用 --> <h2>doubleCount: {{ counterStore.doubleCount }}</h2> <h2>doubleCountAddOne: {{ counterStore.doubleCountAddOne }}</h2> <h2>friend-111: {{ counterStore.getFriendById(111) }}</h2> </div></template><script setup> import useCounter from '@/stores/counter'; const counterStore = useCounter() // 在js文件中使用 const doubleCount = counterStore.doubleCount; const doubleCountAddOne = counterStore.doubleCountAddOne; const frend = counterStore.getFriendById(111)</script>5.3 getters中获取另一个store中的state/getters数据// 定义关于counter的storeimport { defineStore } from 'pinia'// 引入另一个storeimport useUser from './user'const useCounter = defineStore("counter", { state: () => ({ count: 99, }), getters: { // 4.getters中用到别的store中的数据 showMessage(state) { // 1.获取user信息 const userStore = useUser() // 2.获取自己的信息 // 3.拼接信息(使用另一个store中的数据) return `name:${userStore.name}-count:${state.count}` } }})export default useCounter六、actions的使用

actions 相当于组件中的 methods。

可以使用defineStore()中的actions属性定义,并且它们非常适合定义一些业务逻辑。

和getters一样,在action中可以通过this访问整个store实例的所有操作。

6.1 基本定义方式// 定义关于counter的storeimport { defineStore } from 'pinia'const useCounter = defineStore("counter", { state: () => ({ count: 99, }), // 定义actions actions: { increment() { this.count++ }, incrementNum(num) { this.count += num } }})export default useCounter6.2 基本使用方式<template> <div class="home"> <h2>doubleCount: {{ counterStore.count }}</h2> <button @click="changeState">修改state</button> </div></template><script setup> import useCounter from '@/stores/counter'; const counterStore = useCounter() function changeState() { // 可以通过counterStore对象直接使用 // counterStore.increment() counterStore.incrementNum(10) }</script>6.3 Actions中的异步操作import { defineStore } from 'pinia'const useHome = defineStore("home", { state: () => ({ banners: [], recommends: [] }), actions: { async fetchHomeMultidata() { const res = await fetch("http://123.207.32.32:8000/home/multidata") const data = await res.json() //得到数据后直接复制给state this.banners = data.data.banner.list this.recommends = data.data.recommend.list return 'success' } }})export default useHome6.4 调用异步actions方法<script setup> import useHome from '@/stores/home'; const homeStore = useHome() homeStore.fetchHomeMultidata().then(res => { console.log("fetchHomeMultidata的action已经完成了:", res) })</script>
本文链接地址:https://www.jiuchutong.com/zhishi/293147.html 转载请保留说明!

上一篇:(HOTA)多目标跟踪MOT指标计算方法(多目标pso)

下一篇:尚融宝28-投资列表展示(尚融宝盈(宁波)投资中心(有限合伙))

  • 微信单删还能看到点赞吗(微信单删还能看到对方的点赞吗)

    微信单删还能看到点赞吗(微信单删还能看到对方的点赞吗)

  • 两台电脑用同一个密钥(两台电脑用同一个ip地址)

    两台电脑用同一个密钥(两台电脑用同一个ip地址)

  • ipone11能用5g嘛(iphone11能否用5g)

    ipone11能用5g嘛(iphone11能否用5g)

  • 华为手机4g突然成2g了怎么恢复(华为手机4g突然成3g了怎么恢复)

    华为手机4g突然成2g了怎么恢复(华为手机4g突然成3g了怎么恢复)

  • 平板怎么横屏(腾讯视频平板怎么横屏)

    平板怎么横屏(腾讯视频平板怎么横屏)

  • 16g和8g组双通道吗(16g双通道和8g单通道)

    16g和8g组双通道吗(16g双通道和8g单通道)

  • 办手机卡要多少岁(办手机卡要多少钱一张联通)

    办手机卡要多少岁(办手机卡要多少钱一张联通)

  • 抖音怎么评论而不是回复(在抖音怎么评论)

    抖音怎么评论而不是回复(在抖音怎么评论)

  • 淘宝商品过期不存在怎么回事 店铺还在(淘宝商品过期不存在怎么回事 店铺不在)

    淘宝商品过期不存在怎么回事 店铺还在(淘宝商品过期不存在怎么回事 店铺不在)

  • 手机qq 浏览器怎么建文档(手机qq浏览器怎么把文字居中)

    手机qq 浏览器怎么建文档(手机qq浏览器怎么把文字居中)

  • b站画面卡住有声音(b站视频画面卡住)

    b站画面卡住有声音(b站视频画面卡住)

  • 苹果台式电脑有主机吗(苹果台式电脑有独立显卡吗)

    苹果台式电脑有主机吗(苹果台式电脑有独立显卡吗)

  • 12306电子车票可以取票吗(12306电子客票可以取票吗)

    12306电子车票可以取票吗(12306电子客票可以取票吗)

  • 千兆级lte和4glte区别(千兆级lte和lteadvance)

    千兆级lte和4glte区别(千兆级lte和lteadvance)

  • 抖音如何发图片评论(抖音如何发图片配自己的语音)

    抖音如何发图片评论(抖音如何发图片配自己的语音)

  • qq连麦放歌对方听不到(qq连麦听音乐对方听到的吗)

    qq连麦放歌对方听不到(qq连麦听音乐对方听到的吗)

  • 苹果打电话可以录屏吗(苹果打电话可以视频吗)

    苹果打电话可以录屏吗(苹果打电话可以视频吗)

  • 恢复出厂设置后电话号码还在吗(恢复出厂设置后无法激活)

    恢复出厂设置后电话号码还在吗(恢复出厂设置后无法激活)

  • oppo有小爱同学吗(oppo用小爱同学app)

    oppo有小爱同学吗(oppo用小爱同学app)

  • 2000mb等于多少g内存(两千mb等于多少g)

    2000mb等于多少g内存(两千mb等于多少g)

  • 苹果手机怎么一键加速(苹果手机怎么一键关闭所有程序)

    苹果手机怎么一键加速(苹果手机怎么一键关闭所有程序)

  • 苹果扣费怎么申请退款(苹果扣费怎么申请退款能成功)

    苹果扣费怎么申请退款(苹果扣费怎么申请退款能成功)

  • 苹果怎么关闭快门声音(苹果怎么关闭快手通知消息)

    苹果怎么关闭快门声音(苹果怎么关闭快手通知消息)

  • iphonexr可以隐藏程序吗(iphonexr可以隐藏刘海吗)

    iphonexr可以隐藏程序吗(iphonexr可以隐藏刘海吗)

  • 居中矩形阴影在哪(矩形中间阴影面积)

    居中矩形阴影在哪(矩形中间阴影面积)

  • gorun是什么牌子(Gorun是什么牌子机油)

    gorun是什么牌子(Gorun是什么牌子机油)

  • DedeCMS模板及系统程序编码转换(GBK与UTF-8互转)的方法(dedecms源码)

    DedeCMS模板及系统程序编码转换(GBK与UTF-8互转)的方法(dedecms源码)

  • 支付税金怎么算
  • 小规模免征增值税会计处理
  • 存货跌价准备影响当期损益吗
  • 光盘税收分类编码是多少
  • 小规模纳税人30万含专票吗
  • 一般纳税人月底增值税如何结转
  • 应付票据和应付账款有什么区别
  • 预提利息收入纳税调整
  • 信息技术服务企业研发费用加计扣除
  • 单位为个人负担工资、薪金所得的个税,怎么征收个税
  • 会计凭证在设计中应遵循的设计原则
  • 人民币结算意味着什么
  • 收到汇算清缴退税账务处理
  • 收到增值税专用发票怎么处理
  • 购买电脑的方案
  • 进出口贸易中押金怎么算
  • 红字信息表编码怎么查
  • 股权交易要不要缴纳印花税?
  • 小规模纳税人增值税税率
  • 留存收益转增股本,另一方公司怎么做账
  • 营改增后房地产公司税种及税率
  • 收到政府补助的现金流
  • 物流公司搬运货物合法吗
  • 鸿蒙系统开发者选项怎么关闭
  • 预售房款预缴企税怎么算
  • 预付账款是企业销售过程中形成的一种非货币形式的债权
  • 模具维修费做什么费用
  • 侵权行为 法律行为
  • php数组函数大全
  • linux系统设置中文语言
  • G40/50-70、SR1000随机Linux改安装Win7系统的实现方法
  • 逾期未收回包装物押金会计分录
  • 高新技术企业税率15%
  • php日期差数
  • 最常用的成本核算方法表
  • 企业一次性取得所得税
  • vue引用类型
  • 批发企业商品盘点发生短缺时
  • 应收账款怎么做账
  • 只有进项税没有销项
  • 人体姿态识别国内外研究现状
  • js防抖函数和节流函数
  • 2022年终总结
  • js中this指向有几种情况
  • git web hook
  • 开发日志模板
  • 一般项目的进项税和即征即退进项税
  • mysql数据类型和java对应
  • 财务报表中存货为负数是什么意思
  • 缴纳水土保持补偿费分录是什么
  • 现金净流量的计算公式正确的有
  • 暂估成本的账务怎么处理
  • 增值税普通发票可以抵扣吗
  • 关于购买安保器材的报告
  • 企业收到微信和企业微信
  • 怎么查对方是一般还是小规模
  • 企业的借款费用有哪些处理方法
  • 账户信息变更说明
  • 营业费用这个科目还在用吗
  • winpe如何使用
  • u盘界面可以设置背景吗
  • linux系统中用户账户有哪些分类
  • avcodec.dll是什么意思
  • centos6.5升级到7.2
  • linux shell脚本实例
  • win10电脑磁盘损坏
  • win7打开文件提示用户没有访问权限怎么办
  • 关于月亮的诗句
  • Jquery Ajax Error 调试错误的技巧
  • 认识 认知
  • 用球体模拟天空的游戏
  • 猫的所有视频
  • unity3d打开
  • javascript的语句
  • 怎么撤销税务三方协议
  • 怎么查询高速路封闭和开通
  • 水利建设基金的计提与会计处理
  • 河北省电子税务局电话
  • 股权转让本人不签字可以吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设