位置: 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-投资列表展示(尚融宝盈(宁波)投资中心(有限合伙))

  • imovie有安卓版的吗(安卓版imovie2019)

    imovie有安卓版的吗(安卓版imovie2019)

  • 小米手机如何用LHDC(小米手机如何用nfc复制门禁卡)

    小米手机如何用LHDC(小米手机如何用nfc复制门禁卡)

  • qq音乐人工服务在哪(qq音乐人工服务电话24小时电话不接怎么办)

    qq音乐人工服务在哪(qq音乐人工服务电话24小时电话不接怎么办)

  • ipad有必要买插卡版吗(ipad必须要用原装插头吗)

    ipad有必要买插卡版吗(ipad必须要用原装插头吗)

  • 手机身份验证的答案忘记了怎么办(手机身份验证的答案是什么)

    手机身份验证的答案忘记了怎么办(手机身份验证的答案是什么)

  • 全民k歌可以开直播吗(全民k歌可以开视频吗)

    全民k歌可以开直播吗(全民k歌可以开视频吗)

  • 小米8快充图标不出现(小米8快充图标不见了)

    小米8快充图标不出现(小米8快充图标不见了)

  • 探探没上线会更新位置距离吗(探探上的人不上线怎么办)

    探探没上线会更新位置距离吗(探探上的人不上线怎么办)

  • 小米10和10青春版有什么区别(小米10与小米10青春)

    小米10和10青春版有什么区别(小米10与小米10青春)

  • qq群视频聊天怎么关麦(qq群视频聊天怎么闭麦)

    qq群视频聊天怎么关麦(qq群视频聊天怎么闭麦)

  • 抖音上开小店有什么要求(抖音开小店有粉丝要求吗)

    抖音上开小店有什么要求(抖音开小店有粉丝要求吗)

  • 苹果11支持两个微信吗(苹果11支持两个电信号码吗)

    苹果11支持两个微信吗(苹果11支持两个电信号码吗)

  • oppo三个键怎么设置(oppo三个键怎么设置导航键)

    oppo三个键怎么设置(oppo三个键怎么设置导航键)

  • 华为snkrs出错(华为snkrs一直显示错误)

    华为snkrs出错(华为snkrs一直显示错误)

  • win7要不要升级win10

    win7要不要升级win10

  • iphonexsmax怎么截图屏幕(iphonexsmax怎么截长图片)

    iphonexsmax怎么截图屏幕(iphonexsmax怎么截长图片)

  • 华为p9plus有录屏功能吗(华为p9plus录屏不见了)

    华为p9plus有录屏功能吗(华为p9plus录屏不见了)

  • 小米手机sn码几位(小米手机sn码是怎么样的)

    小米手机sn码几位(小米手机sn码是怎么样的)

  • 华为荣耀9x有没有录屏功能(华为荣耀9X有没有nfc功能怎么打开)

    华为荣耀9x有没有录屏功能(华为荣耀9X有没有nfc功能怎么打开)

  • 在大数据时代数据使用的关键是什么(在大数据时代数据可以产生价值提升产业的竞争力)

    在大数据时代数据使用的关键是什么(在大数据时代数据可以产生价值提升产业的竞争力)

  • 手机上的hd如何关闭(手机hd如何使用)

    手机上的hd如何关闭(手机hd如何使用)

  • iphone11无线充电多少瓦(iphone11无线充电多少w)

    iphone11无线充电多少瓦(iphone11无线充电多少w)

  • 华为如何补买碎屏险(华为手机怎么补购碎屏险)

    华为如何补买碎屏险(华为手机怎么补购碎屏险)

  • 微信语音通话按接听接不了(微信语音通话按钮)

    微信语音通话按接听接不了(微信语音通话按钮)

  • 共享单车骑完不结束会怎样(共享单车骑完不付费的后果)

    共享单车骑完不结束会怎样(共享单车骑完不付费的后果)

  • iphonexr带双微信吗(苹果xr能不能微信双开)

    iphonexr带双微信吗(苹果xr能不能微信双开)

  • 火车wi-fi密码一般多少(火车wifi密码一般是多少)

    火车wi-fi密码一般多少(火车wifi密码一般是多少)

  • 微信怎么改位置(微信怎么改位置信息)

    微信怎么改位置(微信怎么改位置信息)

  • OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading “C:\ProgramData\Anaconda3\lib\site-packages\to

    OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading “C:\ProgramData\Anaconda3\lib\site-packages\to

  • 车船税是每个月交还是每年交
  • 印花税的申报依据是什么
  • 国债利息收入要计入应纳税所得额吗
  • 资产负债表中没有实收资本
  • 销售防疫物资免水洗手液需要什么许可证
  • 延期利息增值税可以抵扣吗
  • 税务局财务报表报送期限
  • 分公司的税收机关在总公司还是分公司
  • 资产负债表负债总额怎么看
  • 个人独资核定征收和查账征收的区别
  • 向香港公司支付服务费税率
  • 购货发票属于外来原始凭证吗为什么
  • 公告费交了以后能否撤销
  • 接受实物投资纳印花税怎么缴纳?
  • 印花税缴款了发现报错了怎么办?
  • 企业多缴纳所得税怎么办
  • 季度营业额超过6万需要补税
  • 个人买卖二手房交什么税
  • 公司与政府协议
  • 纳税信用b
  • 核定征收的小型微利企业
  • 利息支出手续费
  • 在建工程抵工程款
  • 包装物报废收回残料
  • 民办学校会计分录 百度网盘
  • 代购买东西流程
  • 仓库的租赁费
  • 收到折扣属于什么会计科目
  • 出口转内销会计账务处理
  • 非常损失计入
  • Win10 (21H1)Build 19043.1266更新补丁KB5005611正式版发布:附修复更新内容
  • PHP:pg_send_execute()的用法_PostgreSQL函数
  • 划转国有划拨土地流程
  • vue方法顺序执行
  • mnist数据集下载码
  • Css中的color属性用于设置html元素的背景颜色
  • 深度学习之concatenate和elementwise操作(二)
  • 餐饮发票不见了怎么补
  • 织梦内容页模板修改
  • 函数的单调性
  • 所得税费用怎样算出来的
  • 没有盈利的公司
  • sqlgun
  • 差旅费津贴怎么报税
  • 固定资产减值损失影响营业利润吗
  • 商业保理怎么账务处理?
  • 样品费计入
  • 事业单位之间调动难吗
  • 物业公司预收的物业费怎么做账
  • 预支报销怎么做账
  • 企业员工福利费可以做什么
  • 减免所得税额a201030怎么填
  • 主营业务成本与其他业务成本的区别
  • 建筑材料检测费入账科目
  • 企业和债权人有什么利益冲突
  • 该怎么配置
  • win10禁用所有启动项
  • win8和win10双系统安装教程
  • linux图片编辑软件
  • linux 添加ipv6路由
  • Linux x86_64下安装Flash Player 9
  • CentOS yum php mcrypt 扩展安装方法
  • Linux系统用命令进行盘数据往外读不可
  • win7系统运行速度提升
  • 微软补丁发布时间
  • 如何配置sendmail
  • windows7关机注销很慢
  • 有道词典encountered an improper argument
  • Android之Android apk动态加载机制的研究
  • unity3d从入门到精通
  • jquery双击
  • 在javascript中
  • 一个简单的网页
  • node.jsexpress
  • Unity PlayerPrefs.DeleteAll 无效以及 PlayerPrefs文件保存位置
  • jquery数据绑定
  • 税务局高风险是怎么办
  • 为什么要征收城乡土地
  • 深圳车牌注销需要车辆到场吗
  • 2020各省旅游
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设