场景描述:

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. Jenkins分布式与并行

    目录 一.简介 二.agent 通过JNLP协议增加agent 通过Swarm插件增加agent agent部分详解 三.agent放入Docker 使用Docker 配置Docker私有仓库 四.并 ...

  2. 判断是否为空….IsEmpty(Power Query 之 M 语言)

    公式: 判断表:=Table.IsEmpty( 表) 判断列表:=List.IsEmpty( 列表) 说明: 此公式的参数一般是一个由公式生成的结果 最终效果: 表/列表中全部是空的返回true 表/ ...

  3. 批处理文件 .bat 并行Arcpy脚本提高效率的思路-提升版

    目录 前言 Arcpy脚本 导入库 函数定义 循环实现 批处理(.bat)脚本 前言 我在之前的博客园博客里,阐述了如何编写Arcpy脚本,如何利用Windows bat批处理脚本同时打开多个cmd窗 ...

  4. 网站高可用架构之BASE原理

    BASE理论是eBay架构师提出的. BASE定理来源:是CAP中一致性和可用性的权衡结果,它来自大规模互联网分布式系统的总结,是基于CAP定理逐步演化而来的. BASE定理的核心思想:即使无法做到强 ...

  5. 『学了就忘』Linux日志管理 — 93、日志轮替补充

    目录 1.把自己的日志加入日志轮替 (1)操作方式 (2)示例 2.logrotate命令 1.把自己的日志加入日志轮替 使用RPM包方式安装服务的日志会自动的加入logrotate轮替,一般不需要你 ...

  6. centos下修改hosts文件以及生效命令

    修改 vim /etc/hosts 生效 service network restart 或者 /etc/init.d/network restart

  7. Spring整合redis实现key过期事件监听

    打开redis服务的配置文件   添加notify-keyspace-events Ex  如果是注释了,就取消注释 这个是在以下基础上进行添加的 Spring整合redis:https://www. ...

  8. Redis报错:RDB snapshots, but it is currently not able to persist on disk 处理

    Response received : -MISCONF Redis is configured to save RDB snapshots, but it is currently not able ...

  9. cmake全面教程

    1. 官网教程 2. 中文教程 3. Modern CMake

  10. 【LeetCode】801. Minimum Swaps To Make Sequences Increasing 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 参考资料 日期 题目地址:https:// ...