概述,普通的直接通过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. 小程序报错 TLS 版本必须大于等于 1.2

    https://www.cnblogs.com/phpper/p/6866036.html 服务器是windows 2008 server 环境是IIS7SSL是申请用的阿里免费.微信小程序发现wx. ...

  2. linx下对文件权限设置

    语法格式:chmod u+/-rwx,g+/-rwx,o+/-rwx filename 如:1. 给主人添加读权限,并减去执行权限:chmod u+r,u-x filename2. 给所有用户(主人. ...

  3. 3.3.1 MyBatis框架介绍

    MyBatis框架介绍 1. 什么是框架 (1) 框架是偷懒的程序员将代码进行封装, 之后进行重复使用的过程. (2) 框架其实是一个半成品, 以连接数据库为例, 连接数据库使用的驱动, url, 用 ...

  4. openpyxl.utils.exceptions.IllegalCharacterError

    如果是手动调用 xlwt 这种第三方库除了错可能没法找错误,但是从错误中我们看到错误是由 openpyxl 抛出的,我们试着从 openpyxl 中找解决方案 出错处的代码 value = value ...

  5. (转) jmeter 获取cookie

      转自 https://blog.csdn.net/five3/article/details/53842283 jmeter是测试过程中会被用到的一个测试工具,我们即可用来进行压力的压测,也可以用 ...

  6. nvidia-smi 实时查看

    需要用到 watch 命令: watch -n nvidia-smi

  7. Docker入门详解(转载)

    来源 http://dockone.io http://dockone.io/article/6051 Docker是世界领先的软件容器平台,所以想要搞懂Docker的概念我们必须先从容器开始说起. ...

  8. 关于IE浏览器 ajax 请求返回数据不对的问题

    在使用ajax向后台发送请求的时候,在使用ie 进行调试的时候发现根据条件进行查询时,返回的数据与没有根据条件进行查询时数据相同,也就是条件没有发生作用. 经过同事的帮助发现ajax初始化设置时没有c ...

  9. Unity shader之ColorMask

    Color Mask解释,见unity文档: ColorMask ColorMask RGB | A | 0 | any combination of R, G, B, A Set color cha ...

  10. ubuntu装好jupyter启动失败问题

    ::/jupyter/nbserver-.json: [Errno ] Permission denied: '/run/user/1000/jupyter/nbserver-35390.json' ...