位置: 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 介绍

  • iphone13pro怎么关闭5g(iphone13pro怎么关静音震动)

    iphone13pro怎么关闭5g(iphone13pro怎么关静音震动)

  • airpods丢了怎么查找(airpods丢了怎么用ipad找)

    airpods丢了怎么查找(airpods丢了怎么用ipad找)

  • 钉钉作业提交错了怎么撤回(钉钉作业提交错了怎么重新提交)

    钉钉作业提交错了怎么撤回(钉钉作业提交错了怎么重新提交)

  • 为什么通过手机号搜不到对方微信(为什么通过手机号码添加微信找不到人)

    为什么通过手机号搜不到对方微信(为什么通过手机号码添加微信找不到人)

  • 粤通卡etc蓝牙连接不上(etc粤卡通蓝牙开关)

    粤通卡etc蓝牙连接不上(etc粤卡通蓝牙开关)

  • 佳能800d和80d区别(佳能800d和佳能80d单反哪个好)

    佳能800d和80d区别(佳能800d和佳能80d单反哪个好)

  • 佳能e16故障代码(佳能显示e16)

    佳能e16故障代码(佳能显示e16)

  • gtx1660super带的动2k屏吗

    gtx1660super带的动2k屏吗

  • 华为手机忘记了自己设置的密码怎么办(华为手机忘记了密码怎么解锁)

    华为手机忘记了自己设置的密码怎么办(华为手机忘记了密码怎么解锁)

  • 情景模式在哪里找(一加手机情景模式在哪里)

    情景模式在哪里找(一加手机情景模式在哪里)

  • 怎样永久保存私密照片(想保存怎么办)

    怎样永久保存私密照片(想保存怎么办)

  • 老款ipad怎么升级到10以上(老款ipad怎么升级到15以上)

    老款ipad怎么升级到10以上(老款ipad怎么升级到15以上)

  • Excel重复值怎么找(excel重复值怎么删除只保留一个)

    Excel重复值怎么找(excel重复值怎么删除只保留一个)

  • 微信语音聊天前几秒录不上(微信语音聊天记录)

    微信语音聊天前几秒录不上(微信语音聊天记录)

  • 为什么抖音提现一直在受理中(为什么抖音提现成功可是钱没有)

    为什么抖音提现一直在受理中(为什么抖音提现成功可是钱没有)

  • word设置底纹图案样式(word设置底纹图案样式为12.5%)

    word设置底纹图案样式(word设置底纹图案样式为12.5%)

  • 拼多多订单详情页在哪(拼多多订单详情在哪儿能找到)

    拼多多订单详情页在哪(拼多多订单详情在哪儿能找到)

  • 密保手机是什么意思(密保手机是什么手机)

    密保手机是什么意思(密保手机是什么手机)

  • 手机银行怎么查交易记录(手机银行怎么查征信)

    手机银行怎么查交易记录(手机银行怎么查征信)

  • 手机无sim卡怎么办(手机无sim卡怎么回事)

    手机无sim卡怎么办(手机无sim卡怎么回事)

  • 打印机更换墨粉盒(联想m7206打印机更换墨粉)

    打印机更换墨粉盒(联想m7206打印机更换墨粉)

  • 苹果x手机怎么清理缓存(苹果x手机怎么强制关机重启屏幕点不动怎么关)

    苹果x手机怎么清理缓存(苹果x手机怎么强制关机重启屏幕点不动怎么关)

  • 月账单在哪里查询(月账单怎么看)

    月账单在哪里查询(月账单怎么看)

  • qq被永久封号能解除吗(被永久封号的qq号会被注销吗)

    qq被永久封号能解除吗(被永久封号的qq号会被注销吗)

  • airpods左耳不能单独使用(airpods左耳不能用)

    airpods左耳不能单独使用(airpods左耳不能用)

  • cad怎么用(cad怎么画虚线)

    cad怎么用(cad怎么画虚线)

  • Win11 Dev预览版出现奇怪 Bug:电量能充到 100% 以上(windows 11预览版)

    Win11 Dev预览版出现奇怪 Bug:电量能充到 100% 以上(windows 11预览版)

  • inicio.exe是什么文件产生的进程 inicio进程有什么作用(.ini是什么类型文件?)

    inicio.exe是什么文件产生的进程 inicio进程有什么作用(.ini是什么类型文件?)

  • 【小程序开发】—— 封装自定义弹窗组件(小程序开发定制)

    【小程序开发】—— 封装自定义弹窗组件(小程序开发定制)

  • 一般纳税人开普票税率是3%还是13%
  • 小规模纳税人本月应交增值税
  • 税务申报指的是什么
  • 递延所得税什么时候确认
  • 个人所得税申报错误如何更正申报
  • 可以先抵扣下个月的进项票吗
  • 企业财务独立核算
  • 营业成本包括三大费用如何称呼
  • 持有待售流动资产如果说以历史成本计量的时候怎么弄
  • 重型开输机属于固定资产什么类别
  • 营改增后计税依据
  • 票据到期兑付会怎么样
  • 劳动保险费属于营业外支出吗
  • 政府奖励金怎么用
  • 对公受托理财赎回分录
  • 印花税计提多了怎样更正
  • 虚减利润如何进行账务调整?
  • 企业固定资产职称是什么
  • 增值税专用发票电子版
  • 何为销项税额
  • 文化建设费的征收标准
  • 利润表为什么没有主营业务收入
  • 公司注销有哪些原因
  • 自产农产品销售怎么做账
  • 红字负数发票可以抵扣吗
  • 服装工业企业成立时间
  • 操作系统不同
  • 支付宝付款凭证可以当发票吗
  • 少计提的地税怎么做分录
  • 用友财务软件怎样
  • 无形资产的摊销应计入什么科目
  • 劳务收入的会计分录
  • 财务软件税率
  • shadowbar.exe - shadowbar是什么进程 有何作用
  • 缴纳增值税会计处理
  • 内资企业股权转让流程
  • 十个php高级应用题
  • php简单的接口编写示例
  • 实收资本增加印花税申报流程
  • 工程项目出纳
  • 留抵税额是认证过的发票吗
  • 关于公司预支工资制度
  • 查账征收的纳税人能否简易注销
  • 事业结余期末余额在借方
  • php怎么装
  • 长期待摊费用如何做分录
  • 微信小程序 滚动 变色
  • 赔偿给客户的产品交增值税吗
  • 建信融通e信通怎样转让
  • 什么是税后利息支出
  • 去年亏损今年盈利能分红吗
  • 以前年度损益调整怎么做账
  • 减免的增值税要交所得税吗
  • 餐饮店赠品
  • 4s店出售试驾车的增值税是多少
  • 成本费用利润率一般在什么范围
  • sql server无法连接服务器的原因
  • sql2005开启xp_cmdshell
  • mysql 5.7.17 winx64免安装版配置方法图文教程
  • 蓝屏代码bad_system_config_info
  • mbr是什么启动
  • linux入门知识
  • win8系统开机怎么进入桌面
  • opengl的坐标系
  • javascriptcsdn
  • 使用jquery操作dom
  • css如何把图片重叠在一起
  • jqgrid api中文手册
  • vbs运行cmd命令
  • c# unity 教程
  • 税务工商指的是什么
  • 怎么向税局举报
  • 安徽国税局发票查询系统
  • 出口退税需要哪些
  • 邮政银行开税票要什么材料
  • 娱乐会所一般有什么
  • 随子女定居外省好吗
  • 卷票发票丢失怎么办理
  • 注册会计师和注册审计师哪个厉害
  • 北京市印花税减免政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设