场景描述:

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. Redis的一致性哈希算法

    一.节点取余 根据redis的键或者ID,再根据节点数量进行取余. key:value如下 name:1 zhangsna:18:北京 对name:1 进行hash操作,得出来得值是242342345 ...

  2. UNCTF2020 pwn题目

    YLBNB 用pwntools直接连接,然后接受就行. 1 from pwn import * 2 3 p = remote('45.158.33.12',8000) 4 context.log_le ...

  3. LuoguB2105 矩阵乘法 题解

    Content 给定一个 \(n\times m\) 的矩阵 \(A\) 和一个 \(m\times k\) 的矩阵 \(B\),求两个矩阵相乘得到的矩阵. \(n\times m\) 的矩阵 \(A ...

  4. java 输入输出 对象序列化implements Serializable与反序列化:ObjectOutputStream.writeObject() ;objectInputStream.readObject() ;serialVersionUID字段注意

    对象序列化 对象序列化的目标是将对象保存到磁盘中,或允许在网络中直接传输对象.对象序列化机制允许把内存中的 Java 对象转换成平台无关的二进制流,从而允许把这种二进制流持久地保存在磁盘上,通过网络将 ...

  5. 介绍下Shell中的${}、##和%%使用范例,本文给出了不同情况下得到的结果。

    介绍下Shell中的${}.##和%%使用范例,本文给出了不同情况下得到的结果.假设定义了一个变量为:代码如下:file=/dir1/dir2/dir3/my.file.txt可以用${ }分别替换得 ...

  6. Linux的课堂便利脚本

    上课的时,因为教室机总会重新重启,有时候就要重配网卡yum源和下载一些辅助工具,这里写一个脚本省去冗杂的过程 if [[]]可以防止unary operator expected的报错 nmcli d ...

  7. PHP伪协议-文件包含

    lfi.php案例代码 <?php include $_GET['file']; ?> phar://.zip://.zlib://   用于读取压缩文件,zip:// .phart:// ...

  8. MFC之实现无边窗口移动

    说明 演示环境: Vs2015 + MFC 基于对话框程序 效果图 方法1 注意: 此方法存在缺陷: 无法响应LButtonUp消息 添加消息处理函数 函数代码 void CMFCApplicatio ...

  9. Linux c++编译总结(持续更新)

    1. 没有定义的符号 这类的错误, 解决办法:A. 添加对应的头文件(源文件), B.前置声明 1.1 错误描述: error: variable has incomplete type 'class ...

  10. c++基础之operator =处理

    1.注意自我赋值 先看个例子: class A {}; A a ; a = a; // 注意这句 可能实际中,你不会这样做,但是实际中,是有可能的,并且这样做,也不违背语法. BUT, 如果上面的例子 ...