当前位置: 首页 > news >正文

vue--CompositionAPI 中如何使用 VueX

a.同步方法改变数据:

Home.vue

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><h1>{{name}}</h1></div>
</template><script>
import {toRefs} from 'vue';
import {useStore} from 'vuex';export default {name: 'Home',setup(){const store = useStore();const {name}=toRefs(store.state);return{name}}
}
</script>

About.vue

<template><div class="about"><h1 @click="handleClick">This is an about page</h1><h1>{{name}}</h1></div>
</template><script>
import {toRefs} from 'vue';
import {useStore} from 'vuex';export default {name: 'About', setup(){const store = useStore();const {name}=toRefs(store.state);const handleClick=()=>{store.commit('changeName','hello');}return{name,handleClick}}
}
</script>

 

store/index.js

import { createStore } from 'vuex'//VueX 数据管理框架
//VueX 创建了一个全局唯一的仓库,用来存放全局的数据
export default createStore({// 存放全局的数据state: {name: 'dell'},//mutation 里面只允许写同步代码,不允许写异步代码//commit和mutation作关联mutations: {//第四步,对应的 mutation 被执行changeName(state, str) {//第五步 在 mutation 里修改数据// this.state.name = 'lee';state.name = str;}},modules: {}
})

 

 

 

 


 

 b.异步方法改变数据:

 About.vue

 

<template><div class="about"><h1 @click="handleClick">This is an about page</h1><h1>{{name}}</h1></div>
</template><script>
import {toRefs} from 'vue';
import {useStore} from 'vuex';export default {name: 'About', setup(){const store = useStore();const {name}=toRefs(store.state);const handleClick=()=>{store.dispatch('getData');}return{name,handleClick}}
}
</script>

Home.vue

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><h1>{{name}}</h1></div>
</template><script>
import {toRefs} from 'vue';
import {useStore} from 'vuex';export default {name: 'Home',setup(){const store = useStore();const {name}=toRefs(store.state);return{name}}
}
</script>

index.js

import { createStore } from 'vuex'//VueX 数据管理框架
//VueX 创建了一个全局唯一的仓库,用来存放全局的数据
export default createStore({// 存放全局的数据state: {name: 'dell'},//mutation 里面只允许写同步代码,不允许写异步代码//commit和mutation作关联mutations: {//第四步,对应的 mutation 被执行changeName(state, str) {//第五步 在 mutation 里修改数据// this.state.name = 'lee';state.name = str;}},// dispatch 和 actions 作关联actions: {//第二步,store 感知到了你触发了一个叫做 change 的 action//执行 change()方法getData(store) {setTimeout(() => {//第三步,提交一个 commit,触发一个 mutationstore.commit('changeName', 'hello');}, 2000)}},modules: {}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35392.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

在vue3中vue-router的使用

从vue2转到使用vue3&#xff0c;遇到了好多问题&#xff0c;原来使用的方法有很大不同。 1.安装vue-routernext npm install vue-routernext --save 2.创建名为“router”的文件夹&#xff0c;在创建index.js 3.编写index.js 首先引入vue-router插件&#xff0c;然后创建一个…...

js面向对象 —— 继承

二、继承 ES6之前并没有给我们提供extends继承。我们可以通过 构造函数原型对象 模拟实现继承,被称为组合继承。 2.1 、call() 调用这个函数并且修改函数运行时的this指向 ● thisArg :当前调用函数this的指向对象 ● arg1 , arg2 :传递的其他参数 2.2、借用构造函数继承父…...

Java List remove时报UnsupportedOperationException

遇到的问题&#xff1a; 解决后&#xff1a; 源代码&#xff1a; /*** 需求&#xff1a;删除字符串中的a8&#xff0c;并重新组成字符串* param args*/public static void main(String[] args) {String str "a3,a4,a5,a6,a8";String[] moIds str.split(StringPool.…...

计算结构体的大小

#include <stdio.h> struct mystruct1 { // 1字节对齐 4字节对齐 int a; // 4 4 char b; // 1 2(11) short c; // 2 2 }; int main(void)…...

DDD领域驱动设计学习笔记

...

ResultMap 关系映射详细使用

关于MyBatis中ResultMap的详细使用ResultMap简介使用ResultMap创建sql 模仿一对多或多对一关系创建数据库创建SpringBoot项目 导入mybatis依赖pojo---------------------------------------------------------------------------------StudentTeacherdao----------------------…...

Nacos心跳时间配置及服务快速上下线

Nacos心跳时间配置及服务快速上下线 Nacos默认心跳时间是30秒&#xff0c;不太满足正式环境需要&#xff0c;需要调整心跳时间更短&#xff0c;让线上服务上下线能快速感知. 1.修改微服务的nacos的心跳配置时间 preserved.heart.beat.interval: 1000 #该实例在客户端上报心跳…...

SpringBoot知识点总结

目录 1、SpringBoot简介及其优点 2、如何重新加载SpringBoot上的更改&#xff0c;而无需重新启动服务器&#xff1f; 3.SpringBoot中的监视器是什么以及如何监视 4.如何在SpringBoot中禁用Actuator端点安全性&#xff1f; 5.如何在自定义端口上运行SpringBoot应用程序&…...

SQL server安装时显示重启计算机失败问题解决办法

SQL server安装时显示重启计算机失败问题解决办法参考文章&#xff1a; &#xff08;1&#xff09;SQL server安装时显示重启计算机失败问题解决办法 &#xff08;2&#xff09;https://www.cnblogs.com/netflix/p/12074481.html 备忘一下。...

Linux系统编程系列(一)

系统软件属于系统的底层&#xff0c;与内核和系统核心库直接进行交互&#xff0c;系统编程则是进行系统软件的关键&#xff0c;熟悉系统编程可以重现如shell、vim、gcc等系统软件。而作为一个高级C/C编程人员&#xff0c;往往需要在底层进行多次调用&#xff0c;学习Linux系统编…...

PAT A 1133 AC代码(两种输出方式)

跑一遍序列&#xff0c;根据要求分别将结点标记存入v1、v2、v3 我二刷时用ans数组合并了v1、v2、v3&#xff0c;再进行输出会方便很多&#xff0c;不然的话需要分别考虑v1、v2、v3是否为空的情况&#xff08;原本我是那样写的&#xff0c;如果是那样写的同学要注意一下只有v2是…...

Java笔记-解决WebServiceTemplate中No subject alternative names matching IP address xxx

主要的原因是证书有问题&#xff0c;就是程序的IP地址和证书的IP地址不匹配。 这里是客户端报错&#xff0c;使用的是spring-ws 对应的Maven如下&#xff1b; <dependency><groupId>org.springframework.ws</groupId><artifactId>spring-ws-security&…...

LCD驱动芯片工厂,稳定提供高抗干扰超低功耗芯片2C23适用于水电气表以及工控仪表类驱动IC

容&#xff1a; VK2C23是一个点阵式存储映射的LCD驱动器&#xff0c;可支持最大224点&#xff08;56SEGx4COM&#xff09;或者最大416点&#xff08;52SEGx8COM&#xff09;的LCD屏。单片机可通过I2C接口配置显示参数和读写显示数据&#xff0c;也可通过指令进入省电模式。其高…...

重拾React框架学习笔记总结

重拾React框架学习笔记总结 环境搭建 nvm nvm用来管理node版本。 brew install nvmnvm ls-remote // 查看所有的node可用版本 nvm list // 查看已安装node版本 nvm install 版本号 // 下载指定node版本&#xff0c;如nvm install v11.14.0 nvm use 版本号 // 使用指定版…...

numpy练习题

numpy 练习题 numpy 的array操作 1.导入numpy库 import numpy as np2.建立一个一维数组 a 初始化为[4,5,6], (1)输出a 的类型&#xff08;type&#xff09;(2)输出a的各维度的大小&#xff08;shape&#xff09;(3)输出 a的第一个元素&#xff08;值为4&#xff09; anp.ar…...

机器学习中分类与聚类的本质区别

机器学习中分类与聚类的本质区别 机器学习中有两类的大问题&#xff0c;一个是分类&#xff0c;一个是聚类。 在我们的生活中&#xff0c;我们常常没有过多的去区分这两个概念&#xff0c;觉得聚类就是分类&#xff0c;分类也差不多就是聚类&#xff0c;下面&#xff0c;我们就…...

【数组-中等】560. 和为K的子数组

【题目】 给定一个整数数组和一个整数 k&#xff0c;你需要找到该数组中和为 k 的连续的子数组的个数。 示例 1 : 输入:nums [1,1,1], k 2 输出: 2 , [1,1] 与 [1,1] 为两种不同的情况。 说明 : 数组的长度为 [1, 20,000]。 数组中元素的范围是 [-1000, 1000] &#xff0…...

SDKD 2021 C1 8th Round

A - Parity 签到&#xff0c;根据奇数偶数的预算性质。 #include <iostream> #include <cstdio> using namespace std; int a,b,k,ans; int main() {cin>>b>>k;for(int ik-1;i>0;i--){scanf("%d",&a);if(b%2&&a%2||a%2&…...

copy代码常出的报错~持续更新

一 AttributeError: DataFrame object has no attribute ixpandas的1.0.0版本后&#xff0c;已经对该函数进行了升级和重构。 只需要将 ix改成 loc二在pycharm中使用 %matplotlib inline 语句会报错 改成 删掉这行代码&#xff0c;用 plt.show() 展示图表%matplotlib inlin…...

极客时间架构师训练营,实战案例

正文 我在做技术面试官的时候&#xff0c;在问完问题后&#xff0c;照例会问一句&#xff1a;你期望的工资是多少&#xff1f;对此&#xff0c;我只会记录下候选人的回答然后上报&#xff0c;没有同意权&#xff0c;更没有批驳权。 判断候选人能否通过面试&#xff0c;主要看…...

5. 断路器hystrix dashboard turbine

hystrix使用 feign中使用 hystrix feign:hystrix:enabled: true #必须配置Component public class EurekaClientHystrix implements EurekaClientFeign{}使用feign配置了&#xff0c;这些&#xff0c;即可进行回退 Feign 的起步依赖中已经包含Hystrix依赖&#xff0c;所以只…...

springBoot 一键启动多个服务

我们启动springboot服务时经常一个一个去启动,这样操作显然是非常麻烦的,那么怎样让他一键启动多个服务呢? 第一步:打开设置 第二步:选择Compound 第三步:选择你要启动的服务 第四步:点击就可以一键启动了...

JavaScript 字面值对象的一些基本方法

展开运算符的使用 //构造字面量对象时使用展开语法 let person {name:tom,age:18} let person2 {...person} //展开运算符展开对象属性时&#xff0c;只能在对象中进行展开 //console.log(...person); //报错&#xff0c;展开运算符不能直接展开对象 console.log(我是perso…...

深入理解cloud 题外话1:httpPool连接池工具类配置,logback.xml,feign日志配置

httpPool Configuration public class HttpPool {Beanpublic HttpClient httpClient(){System.out.println("init feign httpclient configuration " );// 生成默认请求配置RequestConfig.Builder requestConfigBuilder RequestConfig.custom();// 超时时间request…...

Eclipse打开源码失败

解决&#xff1a;找不到源码&#xff0c;需要链接源码附件。...

黄色固体或黄色油状物PC Biotin-Azide;photoclevable Biotin-N3是可分解的生物素

名 称&#xff1a;PC Biotin-Azide&#xff1b;photoclevable Biotin-N3 外 观&#xff1a;黄色固体或黄色油状物 分子式&#xff1a;C35H55N9O12S 分子量&#xff1a;825.37 纯度&#xff1a;>95% 溶解度&#xff1a;Water, DMSO, DMF 保存条件&#xff1a;-20℃ 12个…...

SqlServer反向生成PowerDesigner物理数据模型

要以管理员的身份运行&#xff01;&#xff01;&#xff01;&#xff01; 我的已经汉化了一部分。选择反向工程里的“Database” 名字随意 点击确定&#xff0c;–>使用数据源&#xff0c;可以不选管理员 点击使用数据源&#xff0c;右边那个&#xff0c;小白色垃圾桶 选…...

部署单节点大数据平台

环境 主机 hadoop1 系统 centos7 hadoop版本 3.2.2 jdk版本 1.8.0_301 jdk和hadoop安装位置/app/ 部署 免密 # 输入四次回车 ssh-keygen -t rsa cd .ssh/ cat id_rsa.pub > authorized_keys chmod 600 authorized_keys 解压软件包 tar -zxf hadoop-3.2.2.tar.gz …...

matplotlib 3D绘图警告;MatplotlibDeprecationWarning: Axes3D(fig) adding itself to the figure is deprecate

警告内容&#xff1a; MatplotlibDeprecationWarning: Axes3D(fig) adding itself to the figure is deprecated since 3.4. Pass the keyword argument auto_add_to_figureFalse and use fig.add_axes(ax) to suppress this warning. The default value of auto_add_to_figur…...

create_pose算子说明

算子作用&#xff1a;创建一个3D姿态 算子声明&#xff1a; create_pose( : : TransX, TransY, TransZ, RotX, RotY, RotZ, OrderOfTransform, OrderOfRotation, ViewOfTransform : Pose)举例&#xff1a; create_pose (EndX - StartX, EndY - StartY, EndZ - StartZ, 0, 0,…...

Go-Excelize API源码阅读(三十八)——SetCellValue

Go-Excelize API源码阅读&#xff08;三十八&#xff09;——SetCellValue 开源摘星计划&#xff08;WeOpen Star&#xff09; 是由腾源会 2022 年推出的全新项目&#xff0c;旨在为开源人提供成长激励&#xff0c;为开源项目提供成长支持&#xff0c;助力开发者更好地了解开源…...

MUI教程

MUI教程1 下载2 引入项目3 导入MUI包4 示例1 下载 我们可以可以去github下载MUI&#xff0c;MUI下载地址 2 引入项目 解压好压缩文件&#xff0c;把dist引入我们的项目就可以正常使用了 3 导入MUI包 import ./lib/mui/css/mui.min.css4 示例 在下载包mui-master\exampl…...

mui常用方法

准备函数 //Mui准备函数 mui.ready(function(){//执行方法体 });//Html5准备函数 mui.plusReady(function(){//执行方法体 })重写mui和doncument <div id"a">点我</div>//这四种点击方法效果相同 (function($, doc){/*mui("body").on("…...

mui使用

mui使用弹出层加载框弹出框&#xff08;优化&#xff0c;居中布局&#xff09;弹出框&#xff08;自定义位置&#xff0c;带html内容&#xff09;div 滚动弹出层 加载框 -----js调用 开启遮罩&#xff1a;mui.showLoading("请稍后..","div"); 关闭遮罩&…...

Office 365 批量创建用户

批量组建用户之前要先确认相对应的服务许可证是否购买&#xff0c;没有购买先购买服务购买服务——选择产品——选择许可证数量——购买 选择付款方式——下订单支付选择你的产品——购买许可证——输入许可证总数——保存管理中心选择Azure Active Directory等待跳转进入管理中…...

网络编程简单学习

目录 一、 概述 1. 什么是计算机网络&#xff1f; 2. 网络编程的目的 3. 需要达到什么样的效果&#xff1f; 二、 网络通信的两个要素 1. 通信双方地址 2. 规则&#xff1a;网络通信协议 三、IP地址 1. IP地址概述 2. IP地址分类 3. 域名 四、端口 五、通信协议 …...

Beginning Office 365 Collaboration Apps 免积分下载

图书说明&#xff1a; 开始充分利用Office 365中的最新协作工具 - 包括SharePoint&#xff0c;OneDrive&#xff0c;Office 365组&#xff0c;Office&#xff0c;团队&#xff0c;Yammer&#xff0c;规划器&#xff0c;流&#xff0c;表单和流程 - 并将它们集成到您团队的项目…...

【转】Office365完整离线安装包下载及自定义安装教程

Office365部署方法 概要提示&#xff1a; 全文内容归结起来其实也就2条命令 下载&#xff1a;D:\365\setup.exe /download D:\365\Configuration.xml&#xff08;此命令为1条&#xff0c;不可以拆分为2行输入&#xff09; 安装&#xff1a;D:\365\setup.exe /configure D:\3…...

Agile Office 365 免积分下载

图书说明&#xff1a; 使用敏捷项目管理方法规划&#xff0c;部署和运行Office 365。这个汤到坚果指南教你如何应用敏捷技术&#xff0c;以使Office 365实现成功&#xff0c;即使Microsoft Office 365平台不断发展和引入新功能。 作者教授节省时间和资源的概念的方法反映了团队…...

office365在线安装太慢,换离线安装终于搞定

offcie365在线安装了一天了&#xff0c;貌似卡死不动了。 找度娘&#xff0c;终于找到靠谱的方法--离线安装。 其实官方都有提供方法&#xff0c;只是自己没注意&#xff0c;详细看这&#xff08;飞机票&#xff09;这里&#xff0c;我把方法简要整理下。 前提&#xff1a;彻底…...

使用Office Deployment Tool离线安装Office 365

众所周知Office 365的安装方法与传统的office不同。传统的office软件有软件包或光盘&#xff0c;双击安装文件即可启动安装程序&#xff0c;而office 365因为更新速率快&#xff0c;没有对外发布的即点即用的软件包&#xff0c;普通用户只能通过在线安装程序&#xff0c;边下载…...

Office Tool Plus 下载使用 365 2021/2019等版本

Office Tool Plus 下载使用 2021/2019等版本 由于本人重装系统之后&#xff0c;之前的有的软件现在发现没有&#xff0c;想做个ppt发现使用PowerPoint居然还要钱&#xff0c;所以特意分享一下如何免费使用office 参考链接: https://www.bilibili.com/video/BV17T4y1C7Lg 第一…...

如何下载Office365离线安装程序包并手动安装?

如何下载Office365离线安装包并手动安装&#xff1f; ©Lander Zhang 专注外企按需IT基础架构运维服务&#xff0c;IT Helpdesk 实战培训践行者博客&#xff1a;https://blog.51cto.com/lander IT Helpdesk 工程师实战培训课程&#xff1a;https://edu.51cto.com/lecturer/…...

干净的国内系统镜像源

免费的系统镜像源下载 一、windows国内镜像源地址 很干净的镜像地址没有什么广告&#xff0c;纯镜像文件。把国外的镜像复制过来了。相当于我们的maven仓库一样。 二、liunx镜像地址 国内大学收录比较全的应该是清华大学和中国科技大学。我习惯中国科技大学下载镜像源。 国…...

二叉查找树(2)-二叉树-数据结构和算法(Java)

文章目录1 范围查找keys()2 性能分析3 综合测试4 后记1 范围查找keys() 既然是范围查找呢&#xff0c;需要遍历整个二叉树&#xff0c;上一篇我们讲解了二叉树遍历&#xff0c;这里我们就需要用到。 以中序遍历为例&#xff0c;范围[lo,hi][lo,hi][lo,hi]算法如下&#xff1a…...

面试:插件化相关---service

插件service启动分析 同样的&#xff0c;先来看看service的常规启动流程 调用contextimpl.startService/bindService/stopService -> AMS&#xff0c;AMS对应创建ServiceRecord和token后&#xff0c;通知ActivityThreadActivityThread收到startService后&#xff0c;会创建…...

javascript dropdownlist 客户端设置

<script language "JavaScript"> var onecount; onecount0; subcat new Array(); subcat[0] new Array("g90","72"); subcat[1] new Array("i7","72"); subcat[2] new Array("e88","71"...

asp.net开发wap程序必备:识别来访手机品牌型号 选择自 Qqwwee_Com 的 Blog

我们在开发wap应用程序需要有识别来访手机品牌型号的功能&#xff0c;这样才可以更好的为用户提供更好的个性化服务&#xff0c;比如图片类型、屏幕尺寸、铃声类型等。http协议中&#xff0c;User-Agent这个标头指示的浏览器信息,文章最后附加了常见的手机User-Agent.每个厂家&…...

Java并发常见面试题(二)

为什么要使用多线程&#xff1f; 从整体上来看 从计算机底层来说&#xff1a; 线程可以看作是轻量级的进程&#xff0c;是最小的程序执行单位&#xff0c;线程间的切换和调度的成本远远小于进程。另外&#xff0c;多核CPU时代&#xff0c;多个线程可以同时运行&#xff0c;这…...

Linux 5.4 rc1发布: 正式支持Leez P710开发板(转载)

在Linux 5.3 正式版本发布两周后&#xff0c;Linus发布了Linux 5.4的第一个候选版本。在这个版本中我们看到新增了Lockdown这一系统安全相关的重大特性&#xff0c;还增加了对 Microsoft exFAT 这一文件系统的支持&#xff0c;Linux 内核通过增加对 exFAT 文件系统的原生支持&…...