v-module绑定vuex里面的数据
当在严格模式中使用 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里面的数据的更多相关文章
- TreeView树形控件递归绑定数据库里的数据
TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...
- Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据
原文 Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据 第14部分:在运行时绑定到真实的数据 原文地址: http://channel9.msdn.com/Series/ ...
- vs 2015 rdlc报表绑定datagridview中的数据
这几天一直想要实现rdlc报表绑定datagridview中的数据,始终在虚拟表向rdlc报表绑定这一步上出错.今天从下午4点到七点四十一直在尝试.最终还是实现了,最然并不知所以然,这个问题还是以后在 ...
- 在function module 中向数据库插入数据
http://www.sapjx.com/abap-function-module.html 1: 应该在function module 中向数据库插入数据
- 用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯
1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面 利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中 定义一个别名 ...
- JavaScript 绑定事件时传递数据
var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...
- 使用vuex来管理数据
最近一直工作比较忙,博客已经鸽了好久了,趁着今天是周末,写点东西吧 使用vuex来管理数据 最近一直在用vue做项目,但是却从来没真正去用过vuex,因为一直感觉很复杂,其实真正去研究一下啊,就会发现 ...
- vuex commit保存数据技巧
vuex 单向数据流,推荐的commit 改变state数据,写起来非常繁琐,因为改数据可能要写很多commit函数. 依据我的理解,单向数据流主要是为了避免数据混乱,便于调试. 说白了,就是一个数据 ...
- vue3-组件中使用setup函数获取vuex中的数据的新方式
传统方式 setup() { const store = useStore() //传统方式 const aName = computed(() => store.state.name) ret ...
随机推荐
- A1106. Lowest Price in Supply Chain
A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...
- SpringCloud第一弹(入门)
使用IDEA建立SpringBoot多模块工程不爽啊~算了凑合用吧. 第一步.建立一个POM工程 ..Next ..一路next即可,中间啥也不选 第二步.建立Eureka服务器(这个玩意等同于玩Du ...
- spring+shiro共享session完整小例子
之前写过一个,只不过那个不单纯,有人跑不通,所以今天整个纯粹的小例子. 要求你有Redis. 源码 GitHub 目录结构 因为这是个例子,仅仅为了体现共享session,所以权限认证部分没有加入处理 ...
- 高级组件——菜单栏JMenuBar
菜单栏JMenuBar,菜单JMenu,菜单项JMenuItem 一旦A有子菜单项,则A为菜单JMenu,而不是菜单项JMenuItem import javax.swing.*; import ja ...
- HTML学习笔记Day6
一.元素类型 1.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为三种类型:块状元素.内联元素.行内块元素.可变元素 2.块状元素 1)块状元素在网页中就是以块的形式显示,所谓 ...
- CodeForces7D 字符串hash + dp
https://cn.vjudge.net/problem/20907/origin 长度是 n 的字符串 s,如果它自身是回文数,且它的长度为 的前缀和后缀是 (k - )-回文数,则它被称作 k- ...
- 20165232 2017-2018-2《Java程序设计》结对编程一 第一周总结
20165232 2017-2018-2<Java程序设计>结对编程一 第一周总结 结对对象 20165219王彦博 20165232何彦达 需求分析 实现一个程序,要求: 1 支持整数运 ...
- List数组
大家好,我是蜀云泉.我的博文之中存在的不足之处希望大家包涵. 今天学习unity时,在实现某个功能的脚本中发现了List数组.关于List数组的问题我在学C#时已经接触了一点,但是我比较粗心和浮躁以前 ...
- java io系列10之 FilterInputStream
FilterInputStream 介绍 FilterInputStream 的作用是用来“封装其它的输入流,并为它们提供额外的功能”.它的常用的子类有BufferedInputStream和Data ...
- C#设计模式(1)——简单工厂模式
1.什么是简单工厂 现实中的工厂负责生产产品,顾名思义,编程中的简单工厂就是一个生产对象的类,它的主要作用是创建具体的产品类实例.我们以一个生产鼠标为例来分析简单工厂的作用,鼠标有两种:戴尔鼠标和惠普 ...