位置: 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是什么意思)

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

  • 华为的语音助手怎么呼唤(华为的语音助手怎么唤醒)

    华为的语音助手怎么呼唤(华为的语音助手怎么唤醒)

  • 抖音粉丝通知页在哪里

    抖音粉丝通知页在哪里

  • 淘宝改价调用交易失败(淘宝购买改价)

    淘宝改价调用交易失败(淘宝购买改价)

  • 如何从钉钉文件发送到QQ(如何从钉钉文件导出)

    如何从钉钉文件发送到QQ(如何从钉钉文件导出)

  • se2手机壳和8一样吗(se2和8的手机壳)

    se2手机壳和8一样吗(se2和8的手机壳)

  • 新买的苹果手机发烫怎么回事(新买的苹果手机如何查询真伪)

    新买的苹果手机发烫怎么回事(新买的苹果手机如何查询真伪)

  • 闲鱼可以两个手机同时登录吗(闲鱼两个手机登录同一个账号会有影响吗?)

    闲鱼可以两个手机同时登录吗(闲鱼两个手机登录同一个账号会有影响吗?)

  • volte要不要关闭

    volte要不要关闭

  • 什么是美团闪购商家(什么是美团闪购卡)

    什么是美团闪购商家(什么是美团闪购卡)

  • 公众号一天怎么群发2次(公众号一天怎么发多条)

    公众号一天怎么群发2次(公众号一天怎么发多条)

  • 苹果安装完是灰色的(iphone应用安装完灰色)

    苹果安装完是灰色的(iphone应用安装完灰色)

  • excel是系统软件吗(excel2003属于系统软件)

    excel是系统软件吗(excel2003属于系统软件)

  • 相机iso什么意思(相机的hdr是什么意思)

    相机iso什么意思(相机的hdr是什么意思)

  • 抖音认证了为什么就没有流量了(抖音认证了为什么也开不了直播)

    抖音认证了为什么就没有流量了(抖音认证了为什么也开不了直播)

  • 大数据应用领域成就有哪些(下列哪些属于大数据应用领域)

    大数据应用领域成就有哪些(下列哪些属于大数据应用领域)

  • oppo手机网络连接不可用怎么办(oppo手机网络连接不上怎么办)

    oppo手机网络连接不可用怎么办(oppo手机网络连接不上怎么办)

  • 微信语音笔记怎么做(微信语音笔记怎么制作图例)

    微信语音笔记怎么做(微信语音笔记怎么制作图例)

  • web端和pc端的区别(web端与pc端的差别)

    web端和pc端的区别(web端与pc端的差别)

  • 抖音发了为啥浏览量为0(为什么抖音发的视频浏览量显示但是看不到)

    抖音发了为啥浏览量为0(为什么抖音发的视频浏览量显示但是看不到)

  • 苹果11可以设置几个面部(苹果11可以设置4位数密码吗)

    苹果11可以设置几个面部(苹果11可以设置4位数密码吗)

  • 华为手机怎么调整时间(华为手机怎么调字体大小)

    华为手机怎么调整时间(华为手机怎么调字体大小)

  • 苹果11怎么显示电池电量(苹果11怎么显示节假日)

    苹果11怎么显示电池电量(苹果11怎么显示节假日)

  • 抖音怎么注销手机号绑定(抖音怎么注销手机号码不再用)

    抖音怎么注销手机号绑定(抖音怎么注销手机号码不再用)

  • 开通抖音蓝v有效果吗(开通抖音蓝v有啥好处)

    开通抖音蓝v有效果吗(开通抖音蓝v有啥好处)

  • vivox3返回键在哪里(vivo y3s返回键)

    vivox3返回键在哪里(vivo y3s返回键)

  • qq删除再添加对方知道吗(qq删除好友再添加还能有聊天记录吗)

    qq删除再添加对方知道吗(qq删除好友再添加还能有聊天记录吗)

  • 电脑怎么升级win10(电脑怎么升级windows11)

    电脑怎么升级win10(电脑怎么升级windows11)

  • 任务栏变宽了怎么办?(任务栏变宽了怎么调回来win11)

    任务栏变宽了怎么办?(任务栏变宽了怎么调回来win11)

  • 营业额超500万会罚款吗
  • 核定税种可以在哪里申报
  • 应交所得税的计算公式
  • 生产成本怎么核实
  • 工程材料票抵扣比例
  • 企业销售使用过的固定资产如何开票
  • 进项税使报表应交税费负数如何处理?
  • ca浏览器组件如何下载?
  • 公办幼儿园食堂21项制度
  • 拿回费用票普票忘记入账怎么办?
  • 上年工资计提多了才发现
  • 生产领用产成品验证会计分录
  • 斐讯路由器地址在哪里看
  • win10 5月更新已知bug
  • 已抵扣的固定资产进项税转出如何处理
  • 收到银行电子汇票已入账怎么做账
  • 薪酬总额包干什么意思
  • 电脑蓝屏修复方法是什么
  • 未开票收入申报后又要开票
  • win10电脑屏幕颜色变了怎么调到原来的
  • PHP+jQuery翻板抽奖功能实现
  • typecho插件开发教程
  • php 语法
  • 怎么用onekey重装系统
  • php怎么自学
  • deepin缩放
  • 项目设计费怎么算
  • thinkphp5自定义标签
  • 餐费发票怎么做账务处理
  • clh锅
  • 蓝桥杯c题库及答案
  • pytorch .pt
  • php高级程序招聘
  • 企业重组后的债权怎么算
  • 账簿启用交接表图片
  • 电子发票该怎么打印出来
  • 工会筹备金有优惠政策吗
  • 经营性应付项目的增加为什么调减
  • 没进项发票开销项发票是可以吗?
  • 小额转账汇款服务最多转账多少钱
  • 跨年发票两大原则
  • 融资租赁固定资产折旧年限
  • 暂估入账应该如何操作
  • 公司担保无效的后果
  • 投资软件和信息技术服务业
  • 事业单位研究开设的课题
  • 贴现法年末偿还金额
  • 固定资产更新改造被替换的旧部件残值收入
  • 代收物业费有什么风险
  • 委托加工科目有余额嘛
  • 企业贷款利息多少
  • 单位食堂油烟机多长时间清洗一次
  • 行政单位工会经费
  • 一般纳税人10万元以下附加税
  • 营业外支出会导致所有者权益减少吗
  • 股东股权转让会计分录
  • windows自带的
  • windows故障
  • ubuntu 16.04.6安装教程
  • open bsd
  • mac系统怎么画图
  • centos 修改网络配置文件
  • centos6基础命令
  • win8系统怎么取消屏保
  • 在windows xp
  • windows8快速启动设置
  • win7插u盘电脑没反应怎么回事
  • win7系统命令大全
  • windows10无法识别
  • error C2258: illegal pure syntax, must be '= 0'
  • js实现日历可获得的信息
  • linux怎么查看tomcat位置
  • iframe transparent透明背景方法
  • 视觉观点
  • ssh执行远程命令 参数
  • shell脚本判断两个数大小
  • unity5.x游戏开发指南
  • python的排序方法
  • js正则regexp
  • 扬州退契税政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设