当在严格模式中使用 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. 洛谷P3723 礼物

    以前看到过,但是搞不倒.知道了算法之后就好搞了. 题意:给定两个长为n的序列,你可以把某个序列全部加上某个数c,变成循环同构序列. 求你操作后的min∑(ai - bi)² 解: 设加上的数为c,那么 ...

  2. YSLOW(一款实用的网站性能检测工具)

     概述 YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化.  安装  官网:http://yslow.org/ ...

  3. 第二篇 - python爬取免费代理

    代理的作用参考https://wenda.so.com/q/1361531401066511?src=140 免费代理很多,但也有很多不可用,所以我们可以用程序对其进行筛选.以能否访问百度为例. 1. ...

  4. HTML学习笔记Day16

    一.CSS 3D 1.什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于2d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 2.C ...

  5. String 类中的几个练习--获取指定字符串中,大写字母、小写字母、数字的个数||获取一个字符串中,另一个字符串出现的次数

    package cn.homework.demo1; public class GetCount { /* * 获取一个字符串中,另一个字符串出现的次数 * 思想: * 1. indexOf到字符串中 ...

  6. cucumbe无法识别中文场景的问题

    import org.junit.runner.RunWith; import cucumber.api.CucumberOptions; import cucumber.api.junit.Cucu ...

  7. springcloud学习笔记

    一.什么是springcloud,有什么作用 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消 ...

  8. oracle里实例和数据库之间的关系

    一个数据库服务器上可以装几个数据库它们都是用sid来标志,例如orcl1,orcl2,orcl3等等,一个数据库如orcl1中可以有多个实例吗? Oracle数据库,实际上应该是说,我们使用的是Ora ...

  9. 01--STL泛型编程了解

    开始学习侯捷老师的课程了~~ 一:六大组件关系 容器(Container) 算法(Algorithm) 迭代器(Iterator) 仿函数(Function object) 适配器(Adaptor) ...

  10. layui(五)——form组件常见用法总结

    form 是我们非常看重的一块.layui中的form实现全自动的初始渲染,和基于事件驱动的接口书写方式.我整理了layui中form的配置.下边直接给一个栗子,后台采用.net MVC,除了razo ...