当在严格模式中使用 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. numpy 多维数组及数组操作

    NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效率极好,是大量机 ...

  2. 【译】5. Java反射——方法

    原文地址:http://tutorials.jenkov.com/java-reflection/methods.html ====================================== ...

  3. Counted(内存管理机制)

    class Counted { private: unsigned int count_; public: Counted() : count_() { } virtual ~Counted() { ...

  4. prototype 与 proto的关系是什么:

    __proto__是什么? 我们在这里简单地说下.每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto_ ...

  5. 好用的漂浮广告 jquery

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js" type="text/javascript ...

  6. glob.glob 匹配文件

    glob.glob以列表形式返回匹配的文件路径 只有一个参数:文件的匹配规则 e.g. >>>res_home = '/vip_data_center/test_envs/train ...

  7. Mac idea中git igenore设置

  8. day14-jdbc案例(简单的curd&分页)

    回顾: mvc jsp的设计模式1: jsp+javabean jsp的设计模式2: jsp+javabean+servlet jsp:展示数据 javabean:封装数据 封装对数据的访问 serv ...

  9. Java 语言特性

    介绍以下几种语言特性: Java5的特性 1.静态引用 2.可变参数 3.自动装箱和拆箱  包装类的缓存设计 4.枚举 一.静态引用(语法糖,不推荐使用,了解一下即可) 先看看普通的引用,就是impo ...

  10. synchronized和volatile的区别

    但是volatile不适合做计数器使用,即使他具有可见性,但是它不具有原子性.不能保证数据的一致性. 但是volatile适合哪种场景呢? 比较适合做一些标示.比如说两个线程,线程B必须得等线程A执行 ...