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

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

  • 企业微信怎么注销个人账号(企业微信怎么注册)

    企业微信怎么注销个人账号(企业微信怎么注册)

  • 荣耀x20se可以升级鸿蒙系统吗(荣耀x20se支持高刷吗)

    荣耀x20se可以升级鸿蒙系统吗(荣耀x20se支持高刷吗)

  •  华为怎么截屏一段(华为怎么截屏电脑屏幕)

    华为怎么截屏一段(华为怎么截屏电脑屏幕)

  • 锂离子电池充电时锂离子运动的方向是(锂离子电池充电时,锂离子是怎么运动的?())

    锂离子电池充电时锂离子运动的方向是(锂离子电池充电时,锂离子是怎么运动的?())

  • airpods一只耳机连接不上(airpods一只耳机没有声音)

    airpods一只耳机连接不上(airpods一只耳机没有声音)

  • 华为指关节截屏不灵了怎么办(华为指关节截屏没反应)

    华为指关节截屏不灵了怎么办(华为指关节截屏没反应)

  • airpods pro国行港版区别(airpods pro国行和港版有啥区别)

    airpods pro国行港版区别(airpods pro国行和港版有啥区别)

  • 骁龙865比855plus提升多少(骁龙865比麒麟980强多少)

    骁龙865比855plus提升多少(骁龙865比麒麟980强多少)

  • 微信昵称最多可以设置多少字(微信昵称最多可以改几次)

    微信昵称最多可以设置多少字(微信昵称最多可以改几次)

  • 淘宝用户id在哪里找(淘宝账号id在哪里查看)

    淘宝用户id在哪里找(淘宝账号id在哪里查看)

  • 苹果手机微信照片怎么不保存到相册(苹果手机微信照相声音消除)

    苹果手机微信照片怎么不保存到相册(苹果手机微信照相声音消除)

  • 苹果11设置电池百分比(苹果11设置电池电量数字)

    苹果11设置电池百分比(苹果11设置电池电量数字)

  • 新ipad哪些app可以删(ipad购买新手必看)

    新ipad哪些app可以删(ipad购买新手必看)

  • 抖音头像尺寸是多少(抖音头像尺寸是多少px)

    抖音头像尺寸是多少(抖音头像尺寸是多少px)

  • mate305g和mate30pro5g区别(mate305g和mate30pro5g价格)

    mate305g和mate30pro5g区别(mate305g和mate30pro5g价格)

  • iphone有没有指纹解锁(iphone 指纹)

    iphone有没有指纹解锁(iphone 指纹)

  • 畅享9plus有几个摄像头(畅享9plus几个颜色)

    畅享9plus有几个摄像头(畅享9plus几个颜色)

  • 黑鲨2是什么系统(黑鲨是什么系列的)

    黑鲨2是什么系统(黑鲨是什么系列的)

  • 华为p30是不是自带膜(华为p30有自动定位吗)

    华为p30是不是自带膜(华为p30有自动定位吗)

  • oppok3是什么机身(oppok3是5g手机吗?)

    oppok3是什么机身(oppok3是5g手机吗?)

  • 电脑怎么安装双系统?Win11 和 Win7双系统安装图文教程(电脑怎么安装双显卡)

    电脑怎么安装双系统?Win11 和 Win7双系统安装图文教程(电脑怎么安装双显卡)

  • linux下普通文件和目录文件区别详解(.linux文件)

    linux下普通文件和目录文件区别详解(.linux文件)

  • CiteSpace关键词共现图谱含义详细解析与注意事项(citespace关键词共现分析)

    CiteSpace关键词共现图谱含义详细解析与注意事项(citespace关键词共现分析)

  • 山东项目系统慢问题分析和解决(山东省项目)

    山东项目系统慢问题分析和解决(山东省项目)

  • 【自动驾驶】模型预测控制(MPC)实现轨迹跟踪(自动驾驶 模块)

    【自动驾驶】模型预测控制(MPC)实现轨迹跟踪(自动驾驶 模块)

  • 最好最实用的织梦二次开发教程(最好最实用的织毛线)

    最好最实用的织梦二次开发教程(最好最实用的织毛线)

  • 在电子税务局可以抄税吗
  • 印花税申报缴纳错误,怎么办
  • 公司不交工会经费的原因,风险说明
  • 发票没金额能开吗
  • 机械设备关税税率多少
  • 费用会计具体工作总结
  • 现代服务业加计抵减政策适用范围
  • 自建生产用机器设备领用本企业生产的产品
  • 第三方佣金及成本还是费用
  • 去国外参加展览的英文
  • 应付职工薪酬的一级科目
  • 产权交易所怎么赚钱
  • 进项票不足
  • 专项发票和普通发票的税点
  • 什么称为非正数
  • 现金盘亏记哪里
  • 收入冲正
  • 跨年度多计提的印花税怎么冲回
  • 误餐费怎么入账
  • 无形资产的入账价值包括什么
  • 公司员工驻外补贴政策
  • 当月费用下月付款
  • 职工食堂操作流程图
  • win10要更新系统
  • 调整会计分录是什么
  • 贷款逾期了利息和罚息可以不还吗
  • 公司增资的方式有什么
  • Linux系统中修改网络配置文件
  • 企业购买银行理财
  • 应交增值税的会计科目怎么做
  • 车船使用税凭证还要过户吗怎么办
  • php strlen函数
  • 员工报销个人抬头的医疗费打款备注写什么
  • 新能源企业所得税税率是多少
  • yii2中dropDownList实现二级和三级联动写法
  • 嵌入式软件开票税负是1%还是3%
  • html+javascript
  • 精读论文分析
  • 二挡起步教程
  • 出口信用保险补贴是否不征税收入
  • 典当公司收到房款怎么办
  • vite 插件开发
  • 畜牧业科技公司
  • java string.class
  • mysql的innodb引擎支持外键
  • 子公司减资是利好还是利空
  • 个体工商户如何用工
  • 一般纳税人企业所得税怎么征收
  • 工程施工的间接费用年底可以不结转吗
  • 国税发1997191号文有效吗
  • 去年未分配利润 负数 结转今年
  • 个人怎么缴纳五险一金
  • 企业开办费会计分录
  • 广告费用收入
  • 公司与股东的往来款
  • 总分类账,明细分类账,日记账
  • 发票丢失如何处理入账
  • 转账凭证的编制流程
  • 旅游饮食服务企业财务会计制度
  • mysql5.7慢查询
  • mysql增删改查面试题
  • windowsxp不能启动怎么修复
  • ubuntu笔记软件
  • freenas11.2安装教程
  • icg是什么文件
  • Centos 6.5 64位双网卡绑定教程
  • 搭建gitbook
  • 【新功能】“回调特性”的使用教程:
  • cocos2dx 4.0更新内容
  • linux 编译
  • linux -lc
  • shell脚本中判断入参是否为空
  • javascript中的条件控制语句有哪些?
  • bootstrap js插件
  • 如何解决android兼容问题
  • google it automation with python
  • 福建省国家税务总局稽查局局长
  • 居住证在粤省事怎么查询
  • 税务津贴提高1100
  • 红股派息是赠送股票的意思吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设