当在严格模式中使用 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. B1016. 部分A+B

    正整数A的“DA(为1位整数)部分”定义为由A中所有DA组成的新整数PA.例如:给定A = 3862767,DA = 6,则A的“6部分”PA是66,因为A中有2个6. 现给定A.DA.B.DB,请编 ...

  2. [luogu3391][文艺平衡树]

    题目链接 思路 splay区间操作的裸题. 假如要对l-r这段区间操作,那么就先把l-1伸展到根节点,然后把r +1伸展为根的儿子.这样r + 1的左儿子就是要操作的区间了.只要在上面打上标记,以后每 ...

  3. id选择器为变量时

    使用angularjs或者freemarker的同学基本都接触过一个问题:当使用list遍历数组值显示在页面,并要对所显示的数值进行操作时,如何选取数值所在标签? 以下是一个把地址id转为中文地址的函 ...

  4. 马士兵2string buffuer

    string不可变的字符序列 s1=s1+s2

  5. 怎么在linux下创建一个可运行脚本?

    1.touch hello.sh 2.vim hello.sh键入i插入#!/bin/shecho hello world;键入:esc:wq3.chmod 700 hello.sh 4. 执行./h ...

  6. python3 rrdtool 使用

    源自 python自动化运维:技术与最佳实践 并做略微修改 安装 yum install python-rrdtoolyum install rrdtool-devel #因为采集用了psutil模块 ...

  7. MySql笔记一:安装MySql

    MySql第一次安装之后,一定会报错,我遇到了十几种不同的错误,搜来搜去也没有搜出个结果.于是我重新卸载了MySql,卸载干净之后,下载MSI格式的MySql安装包,安装完之后,还是报错,如下图... ...

  8. es安装的时候遇到的所有的坑

    不允许root用户启动. 解决办法,创建子用户. 在linux下需要注意.es默认不能用root用户启动.我们需要新建一个用户来启动. groupadd  es adduser  es-user    ...

  9. 阿里云申请ssl证书配置tomcat访问https

    首先去阿里云上面申请ssl证书,免费的,自己百度去. 申请完ok之后会让你下载一个压缩包,里面有四个文件. 在tomcat安装目录下创建cert文件夹,把这四个文件扔进去 在conf/server.x ...

  10. java语音转文字

    用到的百度提供的api 需要把wav音频文件转成16k的频率,必须转,不转百度api解析不出来.显示音频文件不清晰错误.想要转化还必须要有ffmpeg程序,这个自己百度去下载.然后拿转好的文件扔到百度 ...