位置: IT常识 - 正文

Vue3中的pinia使用(收藏版)

编辑:rootadmin
Vue3中的pinia使用(收藏版) 1.pinia介绍

推荐整理分享Vue3中的pinia使用(收藏版),希望有所帮助,仅作参考,欢迎阅读内容。

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

💂 个人网站:【紫陌】【笔记分享网】 💅 想寻找共同学习交流、共同成长的伙伴,请点击【前端学习交流群】

pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。 依据Pinia官方文档,Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器,更替Vuex4成为Vuex5。 Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说, Vue3 项目,建议使用Pinia。

pinia官方文档

Pinia 的优点

pinia 符合直觉,易于学习。pinia 是轻量级状态管理工具,大小只有1KB.pinia 模块化设计,方便拆分。pinia 没有 mutations,直接在 actions 中操作 state,通过 this.xxx 访问响应的状态,尽管可 以直接操作 state,但是还是推荐在 actions 中操作,保证状态不被意外的改变。store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或者是 MapAction 辅助函数,这是在 Vuex 中很常见的。支持多个 store。支持 Vue devtools、SSR、webpack 代码拆分。

更多查看文档…

2.pinia基本使用首先先安装依赖npm install pinia在main.js中引入pinia并创建容器挂载到根实例上//引入stores暴露出的pinia的实例import pinia from './stores'createApp(App).use(pinia).mount('#app')创建stores文件夹和index.js文件(这个文件以后基本不用管了)import { createPinia } from "pinia";const pinia = createPinia()export default pinia在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。(类似vuex的模块化)

defineStore 是需要传参数的,

第一个参数是id,就是一个唯一的值,简单点说就可以理解成是一个命名空间.第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,第二个是 getters,第三个是 actions。//定义关于counter的storeimport {defineStore} from 'pinia'/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,简单点说就可以理解成是一个命名空间.第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,第二个是 getters,第三个是 actions。*/const useCounter = defineStore("counter",{ state:() => ({ count:66, }), getters: { }, actions: { }})//暴露这个useCounter模块export default useCounter

注意:返回的函数统一使用useXXX作为命名方案,这是约定的规矩。例如上面的useCounter

然后再组件中使用:<template><!-- 在页面中直接使用就可以了 不用 .state--> <div>展示pinia的counter的count值:{{counterStore.count}}</div></template><script setup>// 首先需要引入一下我们刚刚创建的storeimport useCounter from '../stores/counter'// 因为是个方法,所以我们得调用一下const counterStore = useCounter()</script>

注意:在模板使用 ,不用和vuex一样还要.state,直接点state里面的K

运行效果: 可以用vue3的调试工具看pinia

2.1注意Store获取到后不能解构,否则失去响应式

案例需求,点击按钮加一: 一个不解构,一个不解构看看区别。

<template> <div>展示pinia的counter的count值:{{counterStore.count}}</div> <div>展示解构出来的pinia的counter的count值:{{count}}</div> <button @click="addCount">count+1</button></template><script setup>import useCounter from '../stores/counter'const counterStore = useCounter()const {count} = counterStorefunction addCount(){ //这里可以直接操作count,这就是pinia好处,在vuex还要commit在mutaitions修改数据 counterStore.count++}<script/>

在 vuex 里面是坚决不允许这样子直接操作 state 数据的,pinia是可以的,看看上面的addCount函数直接操作。

运行结果:

解决方案: pinia提供了一个函数storeToRefs解决。引用官方API storeToRef 作用就是把结构的数据使用ref做代理

import {storeToRefs} from 'pinia'const counterStore = useCounter()const {count} = storeToRefs(counterStore)

现在数据都是响应式的了

3.修改state的数据

重新新建一个user模块 stores/user.js

//定义一个关于user的storeimport {defineStore} from 'pinia'const useUser = defineStore("user",{ state:()=>({ name:"紫陌", age:18 })})export default useUser

组件中修改数据: **第一种方法:**点击按钮修改数据,这种方法是最直接的修改数据

<template> <div> <h2>名字是:{{name}}</h2> <h2>年龄是:{{age}}</h2> <button @click="updateStore">修改Store数据</button> </div></template><script setup>import useUser from '../stores/user'import {storeToRefs} from 'pinia'const userStore = useUser()const {name,age} = storeToRefs(userStore)function updateStore(){ //一个个的修改状态 userStore.name = "zimo" userStore.age = 20}

效果:点击也修改了

第二种方法:$patch函数修改

function updateStore(){ //一个个的修改状态 // userStore.name = "zimo" // userStore.age = 20 // 一次性修改多个状态 userStore.$patch({ name:"zimo", age:20 })}

这个方式也可以,效果一样。

第三种方法:$state 方式(这个是替换的方式。)这个基本不用,这里就不多说。可以看查阅文档。

第四种方法:$reset()函数是重置state数据的

新增一个重置按钮:

function resetStore(){ userStore.$reset()}

运行结果:点击了修改数据按钮之后在点重置按钮就恢复原始的数据。

4.getters的使用

getters 类似于 vue 里面的计算属性,可以对已有的数据进行修饰。不管调用多少次,getters中的函数只会执行一次,且都会缓存。

最基本的使用 在counter模块演示了,counter模块://定义关于counter的storeimport {defineStore} from 'pinia'const useCounter = defineStore("counter",{ state:() => ({ count:66, }), getters:{ //基本使用 doubleCount(state) { return state.count * 2 }, },})//暴露这个useCounter模块export default useCounterVue3中的pinia使用(收藏版)

组件中:

<div> <h1>getters的使用</h1> <h2>doubleCount:{{counterStore.doubleCount}}</h2> </div>

运行效果:

这样就是最基本的使用了。

一个getter引入另外一个getter

couter模块:

getters:{ //基本使用 doubleCount(state) { return state.count * 2 }, //一个getter引入另外一个getter doubleCountAddTwo(){ console.log(this); //this.是store实例 return this.doubleCount + 2 } },

组件中使用:

<div> <h1>getters的使用</h1> <h2>doubleCount:{{counterStore.doubleCount}}</h2> <h2>doubleCountAddTwo:{{counterStore.doubleCountAddTwo}}</h2> </div>

运行效果并且看看打印的this:

3.getters中用别的store中的数据

在counter模块中拿user模块的store数据。

count模块:

//定义关于counter的storeimport {defineStore} from 'pinia'import useUser from "./user"const useCounter = defineStore("counter",{ state:() => ({ count:66, }), getters:{ //基本使用 doubleCount(state) { return state.count * 2 }, //一个getter引入另外一个getter doubleCountAddTwo(){ console.log(this); //this.是store实例 return this.doubleCount + 2 }, //getters中用别的store中的数据 showMessage(state){ console.log(state); console.log(this) //获取user信息,拿到useUser模块 const userStore = useUser() //拼接信息 return `name:${userStore.name}--count:${state.count}` } },})//暴露这个useCounter模块export default useCounter

注意:要引入user模块

组件中:

<div> <h1>getters的使用</h1> <h2>doubleCount:{{counterStore.doubleCount}}</h2> <h2>doubleCountAddTwo:{{counterStore.doubleCountAddTwo}}</h2> <h2>showMessage:{{counterStore.showMessage}}</h2> </div>

运行结果:

注意:我打印了this和store,他们都是当前这这个模块的实例

这样就在counter模块拿到了user模块的数据了。

5. actions的使用

actions 是可以处理同步,也可以处理异步,同步的话相对来说简单一点.actions类似methods

先看同步使用: counter模块使用: 在actions定义了两个函数一个加一的函数,一个加20的函数。//定义关于counter的storeimport {defineStore} from 'pinia'const useCounter = defineStore("counter",{ state:() => ({ count:66, }), actions:{ increment(state){ //actions没有state,只能通过this拿store,这里打印 console.log(state); this.count++ }, incrementNum(num){ this.count += num } }})//暴露这个useCounter模块export default useCounter

组件中: actions函数在组件中使用

<div> <h1>actions的使用</h1> <h2>count的事值:{{counterStore.count}}</h2> <button @click="changeState">count+1</button> <button @click="incrementNum">count+20</button> </div><script setup>import useCounter from '../stores/counter'const counterStore = useCounter()function changeState(){ counterStore.increment()}function incrementNum(){ counterStore.incrementNum(20)}</script>

运行结果并且看看state是什么

初始值是66,点了一次加1和点了一次加20

注意:state的结果是undefined 所以actions只能通过this访问store。getter的话state和this都能访问。

异步操作使用

在 actions 处理异步的时候呢,我们一般是与 async 和 await 连用。 counter模块: 这里大致演示,具体还看自己怎么使用。

state:() => ({ count:66, list:[] }),actions:{ //大概演示这个异步流程 async axiosData(){ const res = await fetch("http://-----------------") if(code ==200){ //收到数据保存到store this.list = res.data.list return "ok" } } }

组件使用:

<template> <!-- 遍历store的数据 --> <div v-for="item in counterStore.list"></div></template><script setup>import useCounter from '../stores/counter'const counterStore = useCounter()counterStore.axiosData().then(res =>{ console.log("成功",res);})</script>

就这样可以啦!!!

是不是比vuex简洁很多。。。

6.数据的持久化

pinia支持扩展插件

我们想实现数据持久化

npm i pinia-plugin-persist

export const useUserStore = defineStore({ state () { return { count: 0, num: 101, list: [1, 2, 3, 4 ] } }, persist: { enabled: true, // 开启缓存 默认会存储在本地localstorage storage: sessionStorage, // 缓存使用方式 paths:[] // 需要缓存键 }})

效果:

文章有写的不当的地方,欢迎指正修改。如果感觉文章实用对你有帮助,欢迎点赞收藏和关注,你的点赞关注就是我动力,大家一起学习进步。

本文链接地址:https://www.jiuchutong.com/zhishi/298624.html 转载请保留说明!

上一篇:全局平均池化(Global Average Pooling)(全局平均池化(GAP)层)

下一篇:基于Wav2Lip的AI主播

  • 西藏阿里地区改则县附近发生4.6级左右地震

    西藏阿里地区改则县附近发生4.6级左右地震

  • 微博营销最有效的带号方式(微博营销的营销方式)

    微博营销最有效的带号方式(微博营销的营销方式)

  • ppt如何改变比例4:3改成16:9(ppt如何改变比例4:3改成16:9不变形)

    ppt如何改变比例4:3改成16:9(ppt如何改变比例4:3改成16:9不变形)

  • bootmgr is conmpressed电脑上怎么解决(bootmgrisconmpressed无法开机怎么办)

    bootmgr is conmpressed电脑上怎么解决(bootmgrisconmpressed无法开机怎么办)

  • 手机如何群发短信(手机如何群发短信给所有人)

    手机如何群发短信(手机如何群发短信给所有人)

  • 抖音账号异常是怎么回事(抖音账号异常是什么情况,要填身份证号)

    抖音账号异常是怎么回事(抖音账号异常是什么情况,要填身份证号)

  • 华为手机怎么查询是不是新的(华为手机怎么查型号)

    华为手机怎么查询是不是新的(华为手机怎么查型号)

  • 小米音箱app哪里下载(小米音箱什么app)

    小米音箱app哪里下载(小米音箱什么app)

  • 优酷免流量怎么用(优酷免流量怎么关闭自动续费)

    优酷免流量怎么用(优酷免流量怎么关闭自动续费)

  • 华为畅享10充电指示灯怎么设置(华为畅享10充电器多少瓦)

    华为畅享10充电指示灯怎么设置(华为畅享10充电器多少瓦)

  • qq莫名其妙重新登录(qq突然要重新登录是什么意思)

    qq莫名其妙重新登录(qq突然要重新登录是什么意思)

  • 手机信号显示5g是什么意思(手机信号显示5G小加是不是网络信号不好?)

    手机信号显示5g是什么意思(手机信号显示5G小加是不是网络信号不好?)

  • 全民k歌隐身访问对方显示什么(全民k歌隐身访问会留下记录吗)

    全民k歌隐身访问对方显示什么(全民k歌隐身访问会留下记录吗)

  • 华为mate30月亮模式怎么打开(华为mate30epro照月亮)

    华为mate30月亮模式怎么打开(华为mate30epro照月亮)

  • 远程热点故障是因为什么(远程热点故障是为啥)

    远程热点故障是因为什么(远程热点故障是为啥)

  • 抖音视频突然显示审核未通过(抖音视频为什么)

    抖音视频突然显示审核未通过(抖音视频为什么)

  • 如何更换微信的实名认证(如何更换微信的手机号码)

    如何更换微信的实名认证(如何更换微信的手机号码)

  • pcam10是什么型号oppo什么型号(pcam10是什么型号的手机长什么样)

    pcam10是什么型号oppo什么型号(pcam10是什么型号的手机长什么样)

  • 苹果power键是哪个键(苹果的power键)

    苹果power键是哪个键(苹果的power键)

  • 苹果11几个小时充满电(苹果几个小时充满电)

    苹果11几个小时充满电(苹果几个小时充满电)

  • 怎样关闭杀毒软件(怎样关闭杀毒软件手机)

    怎样关闭杀毒软件(怎样关闭杀毒软件手机)

  • 为什么iphone天气加载不出来(为什么iphone天气温度不准)

    为什么iphone天气加载不出来(为什么iphone天气温度不准)

  • 咪咕盒子怎么投屏(咪咕盒子怎么投屏索尼电视上)

    咪咕盒子怎么投屏(咪咕盒子怎么投屏索尼电视上)

  • 小米移动电源3高配版能上飞机吗(小米移动电源3 30000毫安)

    小米移动电源3高配版能上飞机吗(小米移动电源3 30000毫安)

  • 小米推送是什么(小米推送的消息从哪里可以找到)

    小米推送是什么(小米推送的消息从哪里可以找到)

  • ios12能退回去吗(苹果12退回)

    ios12能退回去吗(苹果12退回)

  • 【工作流Activiti7】3、Activiti7 回退与会签(工作流activity)

    【工作流Activiti7】3、Activiti7 回退与会签(工作流activity)

  • 递延所得税资产和负债怎么理解
  • 印花税退回计入什么科目
  • 一般纳税人委托其他单位加工材料收回后直接对外销售的
  • 增值税加计扣除账务处理
  • 私立医院申报程序
  • 防伪税控系统服务费发票在哪里开
  • 物业公司预收款怎么做账
  • 内含增长率的推导
  • 房租收入应该计入什么会计科目
  • 系统技术维护费计入什么科目
  • 支付业务招待费的税费是进项还是销项
  • 燃气在建工程要怎么转固定资产呢?
  • 电子承兑必须对账吗
  • 个人所得税手续费奖励办税人员文件
  • 固定资产领用材料进项税处理
  • 免抵扣税额
  • 印花税可以计入开办费吗
  • 总公司与分公司的账务处理销售
  • 成本费用跨年度怎么计算
  • 公司注销了工程款还能转账吗
  • 利润转增资本交什么税
  • 购货未能取得发票怎么办
  • 科技项目经费怎么申报
  • 过路费可以抵税吗
  • 投资收益企业所得税预缴
  • 补缴社保差额有滞纳金吗
  • 当月应计提的折旧额等于
  • 进项票月初收到能抵上月
  • 共管帐户的特点是什么
  • 硬盘 安装系统
  • linux中gedit命令
  • 住房补贴缴纳比例是多少
  • php tars
  • 月度计提所得税怎么调整
  • windows无法验证显卡驱动的数字签名
  • PHP:pcntl_setpriority()的用法_PCNTL函数
  • h5能不能自动播放
  • 高温补贴 个人所得税
  • 股权投资差额怎么算
  • conda配置虚拟环境
  • 国税一证通
  • css3两种调整背景图片大小的方式
  • php 微信公众号自定义菜单
  • 支付第三方劳务费计入什么科目
  • 下岗职工生活费停发
  • php打不开网页
  • 小规模企业所得税优惠政策最新2022
  • python国内下载地址
  • 盘盈材料会计分录
  • 定额的个体户怎么交税
  • 出口报关单运费单位怎么填
  • 财务会计和预算会计金额可以不等吗
  • 加计扣除的增值税怎么做账
  • 医疗费用属于什么费用
  • 发票上的货物要怎么填?
  • 服务业的收入确认原则
  • 企业票据贴现属于什么业务
  • 企业发生坏账损失时,在当期确认坏账损失
  • 收到社会保险基金结算表
  • 法人在公司账户取钱要纳税么
  • 给员工的奖励怎么做会计分录
  • win10如何添加输入法
  • ubuntu系统怎么进入命令行
  • RHEL5 Apache+Tomcat整合,同时支持jsp与php
  • win8如何打开任务管理器
  • win10 rs3
  • 判断输入的日期是一年中第几天
  • 用滑动门技术设计一幅画
  • 基于javascript的毕业设计
  • eclipse显示错误提示
  • python如何获取
  • python 转换为字符
  • js编写一个标准的单例模式类
  • 电子税务局可以开纸质发票吗
  • 如何在税务系统缴纳医保
  • 地税申报打印不了发票
  • 江西电子税局
  • 黑龙江省税务局领导最新分工
  • 租房减免税收
  • 国家税务总局河南省税务干部学校
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设