概述,普通的直接通过input修改值然后取是不符合vue的规格的,所有数据定义和传递必须通过actions或者mutation来做

思路:通过在mutation层对字段进行定义值,在store中通过v-model来实现双向绑定,这里要注意在实现该双向绑定的时候一定要定义该函数的get、set方法,然后在...mapMutations方法中将mutation里的方法进行引入

<a-input v-model="stateValue"/>
<p>{{ stateValue }} -> lastLetter is {{ inputValueLastLetter }}</p>
...mapMutations([
'setStateValue'
])
 stateValue: {
get () {
return this.$store.state.stateValue
},
set (val) {
this.setStateValue(val)
}
}
setStateValue (state, value) {
console.log(value)
state.stateValue = value
}

Vue-admin工作整理(十四):Vuex和双向绑定的更多相关文章

  1. 【vue】跟着老马学习vue-数据双向绑定

    学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着 ...

  2. How Javascript works (Javascript工作原理) (十四) 解析,语法抽象树及最小化解析时间的 5 条小技巧

    个人总结:读完这篇文章需要15分钟,文章介绍了抽象语法树与js引擎解析这些语法树的过程,提到了懒解析——即转换为AST的过程中不直接进入函数体解析,当这个函数体需要执行的时候才进行相应转换.(因为有的 ...

  3. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登录

    壹周回顾 哈喽,又是元气满满的一个周一,又与大家见面了,周末就是团圆节了,正好咱们的前后端也要团圆了,为什么这么说呢,因为以后的开发可能就需要前后端一起了,两边也终于会师了,还有几天Vue系列就基本告 ...

  5. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  6. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  7. Vue-admin工作整理(四):路由组件传参

    路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...

  8. iOS工作笔记(十四)

    1.scrollview的frame指的是其可视范围,contentSize指的是其滚动范围,分别是在水平方向和竖直方向上的 所以要让scrollview在水平方向不能滚动,那么需要如下设置 _scr ...

  9. Vue的响应式原理---(v-model中的双向绑定原理)

    Vue响应式原理 不要认为数据发生改变,界面跟着更新是理所当然. 具体代码实现:https://gitee.com/ahaMOMO/Vue-Responsive-Principle.git 看下图: ...

随机推荐

  1. [jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证

    最近项目开发中遇到这样的需求“手机号码或者固话至少填写一个”,如下图所示: 项目采用的jquery.validate.js验证组件,目前组件不支持这种“或”逻辑的验证,于是就自己定义一个 jQuery ...

  2. linux服务器情况

    查看Linux 进程命令  ps -aux 或者ps -ef linux 进程很多 如果需要查找某一个进程可以使用 管道和grep命令 Linux下常用命令  grep  匹配字符   ps 查询Li ...

  3. CF822D 贪心+递推

    CF822D [题目链接]CF822D [题目类型]贪心+递推 &题意: 给你n个人,你可以把他们分组,但必须保持每组相等,分组之后每2个人会比赛,比如一组有i个人,那么就要比赛 次,f[i] ...

  4. 接口自动化测试持续集成--Soapui接口功能测试持续集成

    Soapui接口功能测试持续集成,需要先安装好maven和jenkins,maven和jenkins安装和系统环境配置比较简单,在这里不做叙述.   1.Soapui保存的工程文件 soapui工程保 ...

  5. java操作JacocClient下载dump文件

    记录瞬间 import org.jacoco.core.data.ExecutionDataWriter; import org.jacoco.core.runtime.RemoteControlRe ...

  6. php魔术变量以及命名空间

    魔术变量: PHP 向它运行的任何脚本提供了大量的预定义常量. 不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常量它们 ...

  7. CentOS7 源码编译安装Tengine

    简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它的目的是打造一个高效.安全的Web平台. 发展 Tengine的性能和 ...

  8. Java IO和Java NIO 和通道 在文件拷贝上的性能差异分析

    1.  在JAVA传统的IO系统中,读取磁盘文件数据的过程如下: 以FileInputStream类为例,该类有一个read(byte b[])方法,byte b[]是我们要存储读取到用户空间的缓冲区 ...

  9. 异步 async & await

    1 什么是异步 异步的另外一种含义是计算机多线程的异步处理.与同步处理相对,异步处理不用阻塞当前线程来等待处理完成,而是允许后续操作,直至其它线程将处理完成,并回调通知此线程. 2 异步场景 l  不 ...

  10. sql server导出数据,本地数据库远程连接不上,怎样设置防火墙(自用)

    控制面板——>系统安全——>windows防火墙——>高级设置 新建入站规则: 将一下两个应用 允许入站: D:\Program Files (x86)\Microsoft SQL ...