场景描述:

1. 注册弹出框是用 v-model 绑定数据  showRegisterModal  实现的,点击遮罩层框架会把  showRegisterModal=false

2.REGISTER按钮 showRegisterModal=true

3.showRegisterModal 希望vuex里面的数据,我们可以在任何地方控制弹出框的开和关。

解决方案

<template>
<div class="q-mt-md">
<div>
<q-btn label="Register" @click="showRegisterModal=true"/> <q-dialog v-model="showRegisterModal">
<q-card style="width:400px;">
<Register />
</q-card>
</q-dialog>
</div>
</template> <script>
import Register from 'components/Register.vue'
export default {
components:{Register},
computed:{
showRegisterModal:{
get(){
return this.$store.state.myself.show_register_modal
},
set(value){
this.$store.commit('myself/HANDLE_REGISTER_MODAL', value)
}
}
}
}
</script>

备注

这样实现有点曲线救国,小场景用不到,于是我改进了一下:https://www.cnblogs.com/remly/p/12981671.html

[ vue ] 监听v-model数据的变化,只要有变化就改变vuex的state值的更多相关文章

  1. 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化

    使用通配符监听所有自数据字段的变化

  2. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  3. Android_通过ContentObserver监听短信数据变化

    1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox     ...

  4. 20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据

    1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...

  5. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...

  6. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  7. Android 监听ContentProvider的数据改变

    今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...

  8. Vue跨路由触发事件,Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  9. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. highchars操作集合

    一.tooltip 与鼠标指针的距离想调整tooltip和鼠标指针的距离,官方api 和中文api中都没写,只有轴 label.distance . 但我觉得应该有这个,看源码果然有 tooltip ...

  2. 【HarmonyOS】【xml】使用xml绘制视频播放控制栏

    本文记录HarmonyOS使用xml绘制视频播放控制栏 效果图如下 代码如下 点击查看代码 <?xml version="1.0" encoding="utf-8& ...

  3. 【划重点】Python matplotlib绘图设置坐标轴的刻度

    一.语法简介 plt.xticks(ticks,labels,rotation=30,fontsize=10,color='red',fontweight='bold',backgroundcolor ...

  4. vue在某页面监听键盘输入事件

    需求:在某一网页,通过上下左右键控制一些操作 实现: 1.基本代码: 因为没有绑定特定的元素.所以我们将事件绑定到document上. //当前页面监视键盘输入 document.onkeydown ...

  5. exit_hook在pwn题中的应用

    以前只接触过malloc_hook,free_hook,大概意思就是在调用malloc和free的时候会先看看里面有没有东西,有的话就会执行.以前在看一些师傅们博客的时候有看到过exit_hook,前 ...

  6. [BUUCTF]PWN18——bjdctf_2020_babystack

    [BUUCTF]PWN18--bjdctf_2020_babystack 附件 步骤: 例行检查,64位,开启了nx保护 试运行一下程序 大概了解程序的执行过程后用64位ida打开,shift+f12 ...

  7. LuoguP1785 漂亮的绝杀 题解

    Content 因太占排版,请自己去题面查看. Solution 声明:以下和题面相同的变量的意义均和题面相同. 这个题目 \(\texttt{if}\) 操作很多,其他的就是纯模拟. 首先,我们先判 ...

  8. uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息

    基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...

  9. centos7使用docker安装es(elasticsearch)

    1.安装docker依赖(已安装可以不用安装) yum install -y docker 2.搜索镜像 docker search elasticsearch 如果出现以下报错 Cannot con ...

  10. JAVA直接连接Redis

    引入maven <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</ ...