场景描述:

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. DevOps到底是什么意思?

    目录 一.方法论 二.DevOps的起源 三.DevOps到底是什么 四.DevOps的发展现状 五.DevOps与虚拟化.容器.微服务 一.方法论 提到DevOps这个词,我相信很多人一定不会陌生. ...

  2. 后端调用WebApi

    using System;using System.Collections.Generic;using System.Linq;using System.Net.Http;using System.W ...

  3. 不同机房vpc使用openswan打通内网

    1.测试环境: 北京6云主机:120.92.51.75/10.0.3.13     VPC:10.0.0.0/16 Ren-test 上海2云主机:42.157.163.120/192.168.3.3 ...

  4. js(JQuery)引入select2

    官方项目地址:https://select2.org/ 引入css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/sele ...

  5. Linux(centos)下修改mysql的sql_mode模式

    进入MySQL的配置文件 默认是/etc/my.cnf vim my.cnf 在最后一行加入 sql-mode="NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITU ...

  6. Tomcat高级特性及性能调优

    Tomcat对Https的支持 HTTPS简介 Https,是以安全为目标的Http通道,在Http的基础上通过传输加密和身份认证保证了传输的安全性.HTTPS在HTTP的基础上加入SSL层,HTTP ...

  7. 安装MingW64_配置C/C++开发环境_Windows10

    下载安装 mingw-w64托管在sourceforge,下载地址: https://sourceforge.net/projects/mingw-w64/ 安装过程中... 除了下图的界面,其他选择 ...

  8. 【LeetCode】107. Binary Tree Level Order Traversal II 解题报告 (Python&C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:DFS 方法二:迭代 日期 [LeetCode ...

  9. 【LeetCode】1133. Largest Unique Number 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 桶排序 日期 题目地址:https://leetcod ...

  10. Frp内网穿透搭建,家庭主机对外提供接口,支持ssh访问

    Frp内网穿透搭建,家庭主机对外提供接口,支持ssh访问 1.使用场景: 需求1.家中服务器 ubuntu 主机,跑接口服务,需要对外暴漏, 需求2.同时需要在外网ssh远程 ​ 关键词: frp内网 ...