当在严格模式中使用 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. poj3349 Snowflake Snow Snowflakes

    吼哇! 关于开散列哈希: 哈希就是把xxx对应到一个数字的东西,可以理解成一个map<xxx, int>(是不是比喻反了) 我们要设计一个函数,这个函数要确保同一个东西能得到相同的函数值( ...

  2. vue2.0项目实战(4)生命周期和钩子函数详解

    最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...

  3. [AC自动机][学习笔记]

    用途 AC自动机适用于一类用多个子串在模板串中匹配的字符串问题. 也就是说先给出一个模板串,然后给出一些子串.要求有多少个子串在这个模板串中出现过. KMP与trie树 其实AC自动机就是KMP与tr ...

  4. ASP.NET MVC计划任务实现方法(定时执行某个功能)

    系统中定时执行某个任务是比较常用的功能,如一个部门定期向上级部门上报数据是一个典型的例子,下面就简单说说在.net mvc中如何实现定时执行某个功能的方法. 1.首先修改Glocal.asax文件,在 ...

  5. '新', '泽' - ImageMagick - UTF-8非最短形式及编码安全问题

    最近偶然发现,把软件放到 [新建文件夹]  中,ImageMagick 竟无法正常的加载图片了. 我去!什么情况? 抛出的错误是找不到相关的dll,软件中已对中文进行了utf-8编码,这几年来一直没发 ...

  6. (九)逻辑运算,order by,desc

    逻辑运算 AND,OR,NOT ......where 表达式1  and 表达式2: ......where 表达式2  and 表达式1: SQL优化: SQL在解析where时是从右向左解析的. ...

  7. echart折线区域图

    在引入echart区域折线图时,没有出现对应的区域图 当发现引入下面代码到自己的代码中并没有对应的区域图 option = { xAxis: { type: 'category', boundaryG ...

  8. nohup报错

    1 这是脚本编码的问题 解决办法: (1)用vi打开对应的脚本 (2)在命令行下(:set ff?),看一下当前文档的编码格式 ,有两种情况 fileformat=unix和fileformat=do ...

  9. (Dijkstra) POJ1797 Heavy Transportation

    Heavy Transportation Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 53170   Accepted:  ...

  10. JavaMail发送邮箱

    package utils; import java.security.GeneralSecurityException; import java.util.Properties; import ja ...