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 ...
随机推荐
- 洛谷P3723 礼物
以前看到过,但是搞不倒.知道了算法之后就好搞了. 题意:给定两个长为n的序列,你可以把某个序列全部加上某个数c,变成循环同构序列. 求你操作后的min∑(ai - bi)² 解: 设加上的数为c,那么 ...
- YSLOW(一款实用的网站性能检测工具)
概述 YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化. 安装 官网:http://yslow.org/ ...
- 第二篇 - python爬取免费代理
代理的作用参考https://wenda.so.com/q/1361531401066511?src=140 免费代理很多,但也有很多不可用,所以我们可以用程序对其进行筛选.以能否访问百度为例. 1. ...
- HTML学习笔记Day16
一.CSS 3D 1.什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于2d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 2.C ...
- String 类中的几个练习--获取指定字符串中,大写字母、小写字母、数字的个数||获取一个字符串中,另一个字符串出现的次数
package cn.homework.demo1; public class GetCount { /* * 获取一个字符串中,另一个字符串出现的次数 * 思想: * 1. indexOf到字符串中 ...
- cucumbe无法识别中文场景的问题
import org.junit.runner.RunWith; import cucumber.api.CucumberOptions; import cucumber.api.junit.Cucu ...
- springcloud学习笔记
一.什么是springcloud,有什么作用 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消 ...
- oracle里实例和数据库之间的关系
一个数据库服务器上可以装几个数据库它们都是用sid来标志,例如orcl1,orcl2,orcl3等等,一个数据库如orcl1中可以有多个实例吗? Oracle数据库,实际上应该是说,我们使用的是Ora ...
- 01--STL泛型编程了解
开始学习侯捷老师的课程了~~ 一:六大组件关系 容器(Container) 算法(Algorithm) 迭代器(Iterator) 仿函数(Function object) 适配器(Adaptor) ...
- layui(五)——form组件常见用法总结
form 是我们非常看重的一块.layui中的form实现全自动的初始渲染,和基于事件驱动的接口书写方式.我整理了layui中form的配置.下边直接给一个栗子,后台采用.net MVC,除了razo ...