首页 > 其他分享 >vuex的使用

vuex的使用

时间:2023-09-26 17:33:10浏览次数:57  
标签:Vue 间通信 add 使用 组件 vuex store

Vuex的使用

在Vue中实现集中式状态管理的一个Vue插件,对Vue应用中多个组件的功效状态进行集中式的管理(读 / 写),也是一种组件间通信的方式,且适用于任意组件间通信。

使用步骤:

1. 新建store/index.js

 state中:存放数据

mutations:当使用commit方法是会被触发

actions:当使用dispatch方法时会被触发

2. 在组件中使用变量

拿到状态管理器的数值:this.$store.变量名

修改值:三种方式

  - 直接:this.$store.state.num +=1

  - 间接:this.$store.commit('add_m',1)

  -间间接:this.$store.dispatch('add',1)

 3. 任意组件都可以使用,实现了组件间通信

小案例:

store/index.js:

 HomeView组件:

 HelloWorld组件:

 结果:初始值是10

    

标签:Vue,间通信,add,使用,组件,vuex,store
From: https://www.cnblogs.com/Lucky-Hua/p/17730755.html

相关文章

  • [win10] MinGW make、./configue等命令使用
    [win10]MinGWmake、./configue等命令使用el/2023/9/2617:04:19本文建立在你已经配置好了MinGW,如果没有,请点击:https://blog.csdn.net/qq_39575835/article/details/83825300你可以添加形如这样的环境变量C:\MinGW\msys\1.0\bin,这样子make就可以直接使用了。不过正确......
  • CH643-RGB内驱键盘方案软件使用技巧(持续更新)
    一、如何改变键盘使用COM数量CH643内驱键盘方案demo默认使用3*8(RGBSEG)+13COM的结构,也就是最多能够驱动13*8=104个RGB灯,如果想要增加或者减少COM使用数量需要怎么处理呢?具体操作步骤如下:1、IO初始化修改,修改使用COM引脚IO的初始化,如下图所示:2、修改PWM配置初始化中LEDPWM->COM......
  • VUE 3.0使用Tinymce编辑器
    本人使用的IDEA开发工具参考文档:1.官方文档2.中文文档一、使用npm安装Tinymce。我这里是指定了版本号的npm install [email protected]@tinymce/[email protected]二、修改路径,加汉化1、将下载好的tinymce,从node_modules复制到public文件夹里   2、汉化(......
  • mybatis foreach循环使用的两种传参方式
    方式一:传参ids是用逗号隔开Mapper.java List<>selectByIds(@Param("ids")Stringids);Mapper.xml<selectid="selectByIds"parameterType="String"resultType="String"> select*fromtableawherea.idin......
  • 使用HHDBCS管理Redis
    Redis是一款内存高速缓存数据库,可用于缓存,事件发布或订阅,高速队列等场景。因此,根据需要,HHDBCS在主页设置了“发布窗口”及“订阅窗口”。1连接redis打开HHDBCS,在数据库类型中选择Redis,填入相关信息,点击“登陆”即可。2订阅功能点击“订阅窗口”,在弹出框中填入信息,点击订......
  • ceph(五)CephFS部署、使用和MDS高可用实现
    1.部署cephfs服务cephFS即cephfilesystem,可以实现文件系统共享功能(POSIX标准),客户端通过ceph协议挂载并使用ceph集群作为数据存储服务器,https://docs.ceph.com/en/latest/cephfs/。cephFS需要运行MetaDataServices(MDS)服务,其守护进程为ceph-mds,ceph-mds进程管理与cephFS上存......
  • 使用pako.js压缩、解压数据
    最近发现有个接口响应时间很长,查看network发现数据量比较大,导致需要用近3秒才能完成请求。于是决定后端压缩数据后再发给前端解压,顺便把发送数据的地方也改成了压缩数据。本文用到的插件:pako.js、js-base64废话不多说,附上demo:cdn引入插件<scriptsrc="https://cdn.bootcdn.......
  • 使用vite插件进行低代码平台自定义开发(手机版自定义范例)
    前言Youtube上的前端网红「Theo」在React文档仓库发起了一个Pullrequest,号召React文档不要再默认推荐CRA(createreactapp),而是应该将Vite作为构建应用的首选。vite的影响力已经从vue蔓延到了react,可见在前端工程化开发中,它已经越来越流行,是时候该从webpack切换到vite了。为什么......
  • 使用vite插件进行低代码平台自定义开发(手机版自定义范例)
    前言Youtube上的前端网红「Theo」在React文档仓库发起了一个Pullrequest,号召React文档不要再默认推荐CRA(createreactapp),而是应该将Vite作为构建应用的首选。vite的影响力已经从vue蔓延到了react,可见在前端工程化开发中,它已经越来越流行,是时候该从webpack切换到vite了。为......
  • jupyter安装与使用
    1、检查python版本python-Vpip-V2、设置pip源pipconfigsetglobal.index-urlhttps://mirrors.aliyun.com/pypi/simple/pipconfiglist#非https源,须加信任pipconfigsetinstall.trusted-hostxxx.com3、安装&启动jupterlab pipinstalljupyterlabju......