位置: IT常识 - 正文

Vue3-Pinia的基本使用

编辑:rootadmin
Vue3-Pinia的基本使用 什么是Pinia呢?

推荐整理分享Vue3-Pinia的基本使用,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Pina开始于大概2019,是一个状态管理的库,用于跨组件、页面进行状态共享(这和Vuex、Redux一样),用起来像组合式API(Composition API)

Pinia和Vuex的区别PInia的最初是为了探索Vuex的下一次迭代会是什么样子,结合了Vuex核心团队讨论中的许多想法;最终,团队意识到Pinia已经实现了Vuex5中大部分内容,所以最终决定用Pinia来替代Vuex;与Vuex相比,Pinia提供了一个更简单的API,具有更少的仪式,提供了Composition-API风格的API更重要的是,与TypeScript一起使用时具有可靠的类型推断支持与Vuex相比,Pinia很多的优势:

比如mutations不再存在:

mutations最初是为devtools集成,但这不在是问题他们经常认为是非常冗长

更友好的TpeScipt支持,Vuex之前对Ts的支持很不友好

不在有modules的嵌套结构

你可以灵活使用每一个store,他们是通过扁平化的方式来相互使用的;

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

如何使用Pinia

1、安装Pinia

yarn add pinianpm install pinia

2、创建pinia文件

store文件里index.js

import { createPinia } from 'pinia'const pinia = createPinia()export default pinia

3、main.js导入并引用

import { createApp } from 'vue'import App from './App.vue'import pinia from './stores'createApp(App).use(pinia).mount('#app')

4、pinia的状态管理,不同状态可以区分不同文件

//定义关于counter的storeimport { defineStore } from ‘pinia’//defineStore 是返回一个函数 函数命名最好有use前缀,根据函数来进行下一步操作const useCounter = defineStore('counter',{state: () => {count:99}})export default useCounter

5、调用pinia,获取pinia状态值,导入Counter.js,获取Counter.js里面state.count

<template> <div class="home"> <h2>Home View</h2> <h2>count: {{ counterStore.count }}</h2> </div></template><script setup> import useCounter from '@/stores/counter'; const counterStore = useCounter()</script><style scoped></style>Vue3-Pinia的基本使用

注意:pinia解构出来的state也是可以调用,但会失去响应式,需要toRef或者pinia自带storeToRefs

<template> <div class="home"> <h2>Home View</h2> <h2>count: {{ counterStore.count }}</h2> <h2>count: {{ count }}</h2> <button @click="incrementCount">count+1</button> </div></template><script setup> import { toRefs } from 'vue' import { storeToRefs } from 'pinia' import useCounter from '@/stores/counter'; const counterStore = useCounter() // const { count } = toRefs(counterStore) const { count } = storeToRefs(counterStore) function incrementCount() { counterStore.count++ }</script><style scoped></style>store的核心部分:state,getter,action

(相当于:data、computed、methods)

认识和定义State

state是store的核心部分,因为store是用来帮助我们管理状态

操作State

读取和写入state:

默认情况下,可以通过store实例访问状态来直接读取和写入状态;

```const counterStore = useCounter()counterStore.counter++counterStore.name = 'coderWhy'```

重置State: 可以调用store上的$reset()方法将状态重置到其初始值

const counterStore = useCounter()conterStore.$reset()

改变State

除了直接用store.counter++修改store,还可以调用$patch

它允许您使用部分‘state’对象同时应该多个修改

const counterStore = useCounter()counterStore.$patch({counter:100,name:'kobe'})

替换State 可以通过将其$state属性设置为新对象替换Store的整个状态

conterStore.$state = {counter:1,name:'why'}认识和定义Getters

Getters相当于Store的计算属性:

它们可用defineStore()中的getters属性定义getters中可以定义接受一个state作为参数的函数expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{doubleCounter(state){return state.counter *2}}})

访问Store里getters方法

访问当前store的getters:

const counterSotre = useCounter()console.log(counterStore.doublCounter)

我们可以使用this来访问当前的store实例中getters

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{doubleCounter(state){return state.counter *2}doubleCounterAdd(){//this指向storereturn this.doubleCounter +1 }}})

访问其它store的getters

import useUser from ./userconst userStore = useUser()expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounterUser(){return this.doubleCounter + userStore.umu}}})

通过getters可以返回一个函数,可以传参数

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounter(state){return function (is) {return state.id + id}}}})const StoreConter = useCounter();//传参StoreCounter.doublCounter(111)认识和定义Actions

Actions 相当于组件中的methods,可以使用defineStore()中的actions属性定义

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounter(state){return function (is) {return state.id + id}}},actions:{increment(){this.counter++},//传参incrementnum(num){this。counter += num}}})

和getters一样,在action中可以通过this访问整个store实例:

function increment(){//调用counterStore.increment()}function incrementnum(){counterStore.increment(10)}Actions执行异步操作:

Actions中是支持异步操作的,并且我们可以编写异步函数,在函数中使用await

actions:{async fetchHome(){//???请求const res = await fetch('?????')const data = await res.json()console.log('data',data)return data}}cosnt counterStore = useCountercounterStore.fetchHome().then(res => {console.log(res)})
本文链接地址:https://www.jiuchutong.com/zhishi/299275.html 转载请保留说明!

上一篇:前端开发是做什么的?工作职责(前端开发做什么副业)

下一篇:Vue 3 介绍

  • 三星s10怎么截屏(三星s10怎么截屏图片)

    三星s10怎么截屏(三星s10怎么截屏图片)

  • 耳机皮套开裂怎么处理(耳机皮罩裂开怎么办)

    耳机皮套开裂怎么处理(耳机皮罩裂开怎么办)

  • 微信群100人如何抽奖(超100人的微信群进群办法)

    微信群100人如何抽奖(超100人的微信群进群办法)

  • 打印时会弹出打印到文件(打印弹出对话框)

    打印时会弹出打印到文件(打印弹出对话框)

  • qq删好友巨轮多久回来(qq删好友巨轮会掉吗)

    qq删好友巨轮多久回来(qq删好友巨轮会掉吗)

  • 个人热点流量消耗大吗(个人热点浪费流量吗)

    个人热点流量消耗大吗(个人热点浪费流量吗)

  • 腾讯课堂可以看到在线时间吗(腾讯课堂可以看见学生分屏吗)

    腾讯课堂可以看到在线时间吗(腾讯课堂可以看见学生分屏吗)

  • 电脑bios是啥意思(电脑bios有什么用处)

    电脑bios是啥意思(电脑bios有什么用处)

  • 蓝牙共享联系人是什么意思(蓝牙共享联系人全部详情是什么意思)

    蓝牙共享联系人是什么意思(蓝牙共享联系人全部详情是什么意思)

  • 视频怎么放大某个地方(视频怎么放大某个人的脸)

    视频怎么放大某个地方(视频怎么放大某个人的脸)

  • ppt文字样式怎么设置(ppt怎么设置文字效果)

    ppt文字样式怎么设置(ppt怎么设置文字效果)

  • 抖音直播间封禁是什么意思(抖音直播间封禁申诉)

    抖音直播间封禁是什么意思(抖音直播间封禁申诉)

  • 华为手表gt2可以离开手机打电话吗(华为手表gt2可以看图片吗)

    华为手表gt2可以离开手机打电话吗(华为手表gt2可以看图片吗)

  • 云闪付付款码能乘车吗(云闪付付款码能截图支付吗)

    云闪付付款码能乘车吗(云闪付付款码能截图支付吗)

  • 手机漏液是什么意思(手机漏液是什么意思图片)

    手机漏液是什么意思(手机漏液是什么意思图片)

  • 小米9pro怎么设置微信指纹支付(小米9pro怎么设置锁屏壁纸)

    小米9pro怎么设置微信指纹支付(小米9pro怎么设置锁屏壁纸)

  • oppo手机怎么弄小插件(oppo手机怎么弄第二个微信)

    oppo手机怎么弄小插件(oppo手机怎么弄第二个微信)

  • 快手视频超过10分钟怎么发(快手视频超过15分钟怎么发)

    快手视频超过10分钟怎么发(快手视频超过15分钟怎么发)

  • 淘宝台湾买家怎么处理(淘宝台湾订单)

    淘宝台湾买家怎么处理(淘宝台湾订单)

  • 怎么把小说下载到mp4(怎么把小说下载到u盘)

    怎么把小说下载到mp4(怎么把小说下载到u盘)

  • ⅴivo手机x27可以无线充电吗(vivox27支持4g+吗)

    ⅴivo手机x27可以无线充电吗(vivox27支持4g+吗)

  • 笔记本一开机正在休眠(笔记本开机正在扫描和修复驱动器)

    笔记本一开机正在休眠(笔记本开机正在扫描和修复驱动器)

  • 巴斯利卡塔的卡斯泰尔梅扎诺村,意大利 (© Roberto Moiola/Getty Images)(巴蒂斯塔卡里)

    巴斯利卡塔的卡斯泰尔梅扎诺村,意大利 (© Roberto Moiola/Getty Images)(巴蒂斯塔卡里)

  • 税后利润向股东分配股息
  • 9个点的发票跟6个点区别
  • 企业买车购置税跟个人一样吗
  • 出口退税不退税则征税
  • 一般纳税人必须先有进项才能开出来发票吗
  • 房租合同印花税计算方法
  • 支付境外销售佣金是不是属于完全在境外发生的服务
  • 上个月未抵扣忘记做进项会计分录
  • 城市创建税务人在行动
  • 小规模纳税人计提增值税账务处理
  • 进项税转出月底怎么处理
  • 开具红字专用发票要求
  • 软件进项税额分摊方式
  • 形式发票需要报关吗
  • 税收征收管理权是什么
  • 注销企业很麻烦
  • 融资租赁直租会查征信吗
  • 购买原材料无法确认收入
  • 运费从货款中扣除后付款分录怎么做
  • 使用ps能完成的操作有哪些
  • 冲销去年暂估收入
  • 个体工商户需要年审吗
  • 收到采购发票未开票
  • 以租代购怎么入账
  • scardsvr32.exe - scardsvr32是什么进程 有什么用
  • PHP:Memcached::append()的用法_Memcached类
  • php ftp管理系统
  • 进项发票认证后多久可以申报
  • PadExe.exe - PadExe是什么进程 有什么用
  • 高速公路电子发票抵扣进项税
  • conime进程太多
  • 销售商品收取的运费会计分录
  • 财务人员如何管控费用支出
  • 翡翠湾攻略
  • node升级版本
  • 企业亏损还需要交增值税吗
  • 艾罗芒阿
  • TypeError The view function did not return a valid response. The function either returned None 的解决
  • 帮别人开增值税专用发票
  • 达尔文岛在地图上位置
  • qss 设置字体
  • java幂等性是什么
  • 建筑行业工程结算属于什么科目
  • 企业所得税怎么征收几个点
  • java方法的返回值类型有哪些
  • 税务清算后还需要报税吗
  • python __call__
  • mongodb数据删除
  • python 添加列表
  • 报销人和收款人不一致钱打到哪个账户
  • 印花税实际缴纳时计入
  • 公司开发新产品的建议
  • 可供出售金融资产是流动资产吗
  • 5万元买二手车什么品牌比较好
  • 用现金券付房租违法吗
  • 净资产收益率多少才是好股
  • 高速公路通行费抵扣税率
  • 购买不良债权如何追偿
  • 企业商业汇票到期款项存入银行
  • 工会经费返还属于什么收入
  • 可供出售金融资产是指什么
  • 房地产企业成本控制存在的问题及对策
  • putty怎么连接linux
  • 视频对比度饱和度亮度最佳值
  • 苹果mac系统复制粘贴不了
  • win7磁盘c满了怎么办却又分不清哪些是该删除
  • mac锁定快捷键
  • 如何强制清理内存
  • win7关闭xhci
  • xp系统升级成win7还会卡吗
  • 浏览器如何批量打开网址
  • Android:wpa_supplicant决定选择哪种驱动
  • IE6支持position:fixed完美解决方法
  • python的模块和包
  • javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
  • jquery iframe
  • 浙江省税务局领导介绍
  • 杭州市税务局总局地址
  • 租赁合同备案后可以更改吗
  • 专票清单用什么纸打印
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设