当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用  v-model  会比较棘手:

<input v-model="obj.message">

假设这里的  obj  是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时, v-model  会试图直接修改  obj.message 。在严格模式中,由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

用“Vuex 的思维”去解决这个问题的方法是:给  <input> 中绑定 value,然后侦听  input  或者  change 事件,在事件回调中调用 action:

<input :value="message" @input="updateMessage">
computed: {
...mapState({
message: state => state.obj.message
})
},
methods: {
updateMessage (e) {
this.$store.commit('updateMessage', e.target.value)
}
}

下面是 mutation 函数:

mutations: {
updateMessage (state, message) {
state.obj.message = message
}
}

v-module绑定vuex里面的数据的更多相关文章

  1. TreeView树形控件递归绑定数据库里的数据

    TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...

  2. Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据

    原文 Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据 第14部分:在运行时绑定到真实的数据 原文地址: http://channel9.msdn.com/Series/ ...

  3. vs 2015 rdlc报表绑定datagridview中的数据

    这几天一直想要实现rdlc报表绑定datagridview中的数据,始终在虚拟表向rdlc报表绑定这一步上出错.今天从下午4点到七点四十一直在尝试.最终还是实现了,最然并不知所以然,这个问题还是以后在 ...

  4. 在function module 中向数据库插入数据

    http://www.sapjx.com/abap-function-module.html 1: 应该在function module 中向数据库插入数据

  5. 用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯

    1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 ...

  6. JavaScript 绑定事件时传递数据

    var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...

  7. 使用vuex来管理数据

    最近一直工作比较忙,博客已经鸽了好久了,趁着今天是周末,写点东西吧 使用vuex来管理数据 最近一直在用vue做项目,但是却从来没真正去用过vuex,因为一直感觉很复杂,其实真正去研究一下啊,就会发现 ...

  8. vuex commit保存数据技巧

    vuex 单向数据流,推荐的commit 改变state数据,写起来非常繁琐,因为改数据可能要写很多commit函数. 依据我的理解,单向数据流主要是为了避免数据混乱,便于调试. 说白了,就是一个数据 ...

  9. vue3-组件中使用setup函数获取vuex中的数据的新方式

    传统方式 setup() { const store = useStore() //传统方式 const aName = computed(() => store.state.name) ret ...

随机推荐

  1. sprintf() 处理 float类型的数字,保留小数位等。

    关于 sprintf()的百科地址: http://baike.baidu.com/view/1295144.htm sprintf(szText, "%[填空字元][宽度][.精度]f&q ...

  2. 第十六节,卷积神经网络之AlexNet网络实现(六)

    上一节内容已经详细介绍了AlexNet的网络结构.这节主要通过Tensorflow来实现AlexNet. 这里做测试我们使用的是CIFAR-10数据集介绍数据集,关于该数据集的具体信息可以通过以下链接 ...

  3. RabbitMQ入门-路由-有选择的接受消息

    比如一个日志系统,之前的处理方式呢,是各种类型(info,error,warning)的消息都发给订阅者,可是实际情况上不一定都需要.可能A需要error,其他的都不需要.那么就引入了今天的处理方式- ...

  4. Java泛型、List接口整理

    泛型 package com.oracle.demo01; import java.util.HashMap; import java.util.Iterator; import java.util. ...

  5. hd loadBalanceServer F5 BIG-IP / Citrix NetScaler / Radware / Array / HAProxy /

    s 五.Citrix NetScaler 和 CDN 案例 问题描述: Citrix 10.5.66.9软件版本下,存在计时器bug,此bug会造成CDN长连接回源超过设备默认的180S,会发fin包 ...

  6. centos的用户、组权限、添加删除用户等操作的详细操作命令

    1.Linux操作系统是多用户多任务操作系统,包括用户账户和组账户两种 细分用户账户(普通用户账户,超级用户账户)除了用户账户以为还 有组账户所谓组账户就是用户账户的集合,centos组中有两种类型, ...

  7. win10的cmd中显示:telnet不是内部或外部命令也不是可运行的程序或批处理?

    win10的cmd中显示:telnet不是内部或外部命令也不是可运行的程序或批处理? 摘录自:https://blog.csdn.net/haijing1995/article/details/664 ...

  8. css3好看的background渐变背景色积累

    1. Tippy.js background: linear-gradient(91deg,#f1eefc,#9dc6ff 70%,#a5bcff);(body背景色) background: lin ...

  9. hive记录-cdh配置hive和sentry

    1.cdh添加组件-sentry-选择主机-配置数据库 2.配置数据库 1)mysql -uroot -p 2) create database sentry DEFAULT CHARSET utf8 ...

  10. JMX监控Hadoop的部分常用参数位置

    近期版本get无法使用,可能使用了其他参数代替,但源码中已经去掉JMX部分,也没有给出替代接口,应该是不再额外实现了. NameNode DataNode HDFS Yarn HBase MapRed ...