位置: IT常识 - 正文

Vue3中使用pinia(vue3中使用require)

编辑:rootadmin
Vue3中使用pinia

目录

1、安装:npm install pinia

2、创建store文件并配置内部的index.js文件

3、main.js文件中配置

4、组件使用

4-1、 store.$reset()  

 4-2 store.$patch

 5.订阅修改

6.Getter

7、Actions


1、安装:npm install pinia2、创建store文件并配置内部的index.js文件import { defineStore } from 'pinia' //引入pinia//这里官网是单独导出 是可以写成默认导出的 官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱export const useCar=defineStore("test",{ state: () =>{return ({msg:"这是pinia的数据",name:"小狮子",age:18}) //为了避免出错,返回的值用()包起来} })3、main.js文件中配置import { createApp } from 'vue'import App from './App.vue'const app=createApp(App)import { createPinia } from 'pinia' //引入piniaapp.use(createPinia())app.mount('#app') 4、组件使用<template><h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1><button @click="change1">修改store.name</button><router-view></router-view></template><script setup>import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入let store=useCar() //接收 console.log(store)let change1=()=>{store.name="小羊" //修改pinia里面的数据 console.log(store.name)}</script><style scoped>h1{width: 400px; height:200px;background-color:deeppink;}</style>

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

文章相关热门搜索词:vue3中使用require,vue3使用教程,vue3中使用window方法,vue3中使用jsx,vue3中使用jsx,vue3中使用gis地图,vue3中使用gis地图,vue3中使用require,内容如对您有帮助,希望把文章链接给更多的朋友!

效果图

 点击按钮,界面变化

 说明成功修改了pinia里面的数据,且界面刷新证明这种直接修该pinia数据的方式依然是响应式数据。

但如果在接收pinia数据时,进行解构则不再是响应式数据,需要使用toRefs

toRefshttp://t.csdn.cn/pLB5f

4-1、 store.$reset()  

将状态 重置 到其初始值

当我们接收到pinia数据且对其数据进行了大量修改又想还原时,调用此方法就可以将接收的pinia数据全部重置还原

Vue3中使用pinia(vue3中使用require)

注意:store.$reset() 中的store是自己设定的接收变量,重点是 .$reset()  

<template><h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1><button @click="change1">修改store.name</button><button @click="reset">reset</button><router-view></router-view></template><script setup>import {useCar} from "../store/car.js"let store=useCar() console.log(store)let change1=()=>{store.name="小羊"console.log(store.name)}let reset=()=>{ //初始化pinia数据store.$reset()}</script><style scoped>h1{width: 400px; height:200px;background-color:deeppink;}</style>

在之前的案例中修改了pinia的name属性值

 此时我们点击reset按钮,则会重置pinia的所有数据

 

 4-2 store.$patch

群体修改,可以将pinia的数据进行同一修改

特点:批量修改但状态只刷新一次

<template><h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1><button @click="change1">修改store.name</button><button @click="reset">reset</button><button @click="fn">fn</button><router-view></router-view></template><script setup>import {useCar} from "../store/car.js"let store=useCar() console.log(store)let change1=()=>{store.name="小羊"console.log(store.name)}let reset=()=>{ //重置store.$reset()}function fn(){//批量修改store.$patch({ name:"小羊", age:20,})}</script><style scoped>h1{width: 400px; height:200px;background-color:deeppink;}</style>

 

 点击fn按钮后

说明批量修改成功

 5.订阅修改//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次store.$subscribe((mutation, state) => { // 每当它发生变化时,将整个状态持久化到本地存储 localStorage.setItem('test', JSON.stringify(state))})6.Getter

Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用:(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)

//store/index.js文件export const useStore = defineStore('main', { state: () => ({ counter: 0, }), getters: { doubleCount: (state) => state.counter * 2, },})//组件中直接使用: <p>Double count is {{ store.doubleCount }}</p>7、Actions

在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)

之所以提供这个功能 就是为了项目中的公共修改状态的业务统一

export const useStore = defineStore('main', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++//1.有this }, randomizeCounter(state) {//2.有参数 想用哪个用哪个 state.counter = Math.round(100 * Math.random()) }, randomizeCounter(state) { //异步函数 axios("/test").then(res=>{ state.counter = res.data.length }) } },})//组件中的使用: setup() { const store = useStore() store.increment() store.randomizeCounter() }
本文链接地址:https://www.jiuchutong.com/zhishi/285088.html 转载请保留说明!

上一篇:avpm.exe是什么进程 avpm进程是安全的吗(电脑avc是什么意思)

下一篇:最早的操作系统是什么(最早的操作系统被称为什么操作系统)

  • photoshop文字工具包含哪些工具(Photoshop文字工具中的什么在输入提交后形成文字区域)

    photoshop文字工具包含哪些工具(Photoshop文字工具中的什么在输入提交后形成文字区域)

  • 哈罗单车扫码没反应(哈罗单车扫码没有开锁界面)

    哈罗单车扫码没反应(哈罗单车扫码没有开锁界面)

  • afreeca服务器连接失败(afreecaapp连不上服务器)

    afreeca服务器连接失败(afreecaapp连不上服务器)

  • win10睡眠和休眠的区别(win10睡眠和休眠哪个接近手机待机)

    win10睡眠和休眠的区别(win10睡眠和休眠哪个接近手机待机)

  • office2003无法打开(office2003打不开docx)

    office2003无法打开(office2003打不开docx)

  • ipad购买日期未验证是黑机吗(ipad购买日期未验证)

    ipad购买日期未验证是黑机吗(ipad购买日期未验证)

  • 微信别人加我过期了怎么加回去(微信别人加我过于频繁怎么办?)

    微信别人加我过期了怎么加回去(微信别人加我过于频繁怎么办?)

  • 小米手机一键快捷录音(小米手机一键快充在哪里)

    小米手机一键快捷录音(小米手机一键快充在哪里)

  • oppor17长度多少厘米(oppor17手机长宽多少)

    oppor17长度多少厘米(oppor17手机长宽多少)

  • 微机上广泛使用的windows xp是什么(微机上广泛使用的Windows2000是)

    微机上广泛使用的windows xp是什么(微机上广泛使用的Windows2000是)

  • macosmojave要不要升级

    macosmojave要不要升级

  • 陌陌关注多久可以视频聊天(陌陌关注多久可以打语音)

    陌陌关注多久可以视频聊天(陌陌关注多久可以打语音)

  • 朋友圈评论怎么配图(朋友圈评论怎么@别人)

    朋友圈评论怎么配图(朋友圈评论怎么@别人)

  • 钉钉怎样截图发送图片(钉钉截图怎么用)

    钉钉怎样截图发送图片(钉钉截图怎么用)

  • 华为nova6什么时候出(华为nova6什么时候停产的)

    华为nova6什么时候出(华为nova6什么时候停产的)

  • 如何确认对方微信在线(如何确认对方微信号是不是实名制的)

    如何确认对方微信在线(如何确认对方微信号是不是实名制的)

  • oppo电话黑名单在哪里(oppo电话黑名单怎么找出来)

    oppo电话黑名单在哪里(oppo电话黑名单怎么找出来)

  • 苹果无线耳机为什么只有一个有声音(苹果无线耳机为什么连接不上手机)

    苹果无线耳机为什么只有一个有声音(苹果无线耳机为什么连接不上手机)

  • 华为手机打电话黑屏怎么关(华为手机打电话黑屏怎么解决)

    华为手机打电话黑屏怎么关(华为手机打电话黑屏怎么解决)

  • 电脑屏幕突然黑屏但主机仍在运作的原因?(电脑屏幕突然黑屏怎么回事)

    电脑屏幕突然黑屏但主机仍在运作的原因?(电脑屏幕突然黑屏怎么回事)

  • 怎么快速关闭Win10系统的quick access功能(怎么快速关闭电脑屏幕快捷键)

    怎么快速关闭Win10系统的quick access功能(怎么快速关闭电脑屏幕快捷键)

  • 巨大的冰柱悬挂在Abiqua瀑布周围的玄武岩石墙上,俄勒冈 (© Joshua Meador/Tandem Stills + Motion)(巨大的冰柱造句)

    巨大的冰柱悬挂在Abiqua瀑布周围的玄武岩石墙上,俄勒冈 (© Joshua Meador/Tandem Stills + Motion)(巨大的冰柱造句)

  • MAE详解

    MAE详解

  • 印花税和契税是什么意思?什么时候交?
  • 用友项目核算科目的项目不能为空
  • 企业所得税预缴后亏损
  • 如何保证企业生存发展
  • 上年度职工月平均工资是税前还是税后
  • 汽车计提折旧年限及残值率
  • 个人股权转让需要注意什么
  • 有形动产经营租赁税率
  • 政府收回土地使用权
  • 免交增值税是什么意思
  • 支付职工医药费计入什么科目
  • 公益性生物资产属于什么科目
  • 办理会员卡套路消费
  • 没有计提12月底的工资
  • 居民委员会有没有纳税人识别号吗
  • 多缴纳的印花税退回来怎么做分录
  • 企业购入存货分录
  • 购进原材料影响营业利润吗
  • 对账单和电子回单区别
  • 哪些支出可以在计算企业应纳税所得额时加计扣除
  • 验资报告需要什么材料
  • 没有认缴到位的股票
  • 公司生产的产品
  • ps4运行windows
  • u盘中毒症状
  • 坏账准备确认条件
  • 印花税计提缴纳时间
  • vantUI van-picker中的column使用,picker选择器展示对象数组里面的属性,自定义展示数据
  • 增值税专用发票几个点
  • 赊销商品属于什么信用
  • 详解金球奖之争
  • 权益法下长期股权投资超额亏损
  • 该税号缺少必要信息
  • js字符串截取
  • 申请专利费用计入哪个科目
  • 为什么要结转成本?
  • 企业什么时候才能按工龄退休
  • 现金流量风险怎么解决
  • 企业通讯费补贴发放规定
  • 票据背书转让会计处理
  • 购买的优惠卷到期后退款
  • 税务信用级别A有什么好处
  • 设置sql server的安全认证模式为混合认证模式
  • 短期借款利息怎么做账
  • 其他综合收益的税后净额怎么计算
  • 企业税负是否包含增值税
  • 流动资产周转率和总资产周转率
  • 印花税的通俗理解
  • 村集体经济组织架构
  • 事业单位发放生育津贴从哪年执行的
  • 成本费用占营业收入比重
  • 原告起诉被告承担诉讼费
  • 职工教育经费如何列支
  • 其他流动资产
  • 怎么做待摊费用
  • sql server中一个数据库可以有多个文件组
  • mysql中的limit用法有哪些(推荐)
  • Windows(x86,64bit)升级MySQL 5.7.17免安装版的详细教程
  • xp附件游戏
  • vs2015无法启动程序exe
  • 手动ghost恢复
  • windrv.exe
  • win7桌面计算机
  • ps到底怎么用
  • ubuntu下载安装QQ的命令
  • win10每次开机提示硬件设置已更改
  • node.js使用教程
  • jqueryvalidate验证
  • 怎么检测python
  • offset function
  • 深入理解中国式现代化
  • python twilio
  • 小规模纳税人增值税优惠政策2024
  • 地方税务局发票查询
  • 10%加计抵减政策条件
  • 上海《居住登记凭证》
  • 独生子女补贴和退休金一起发吗
  • 税务局宣传报道
  • 禅城有什么小孩好玩的地方
  • 开展志愿服务关爱活动
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设