概述,普通的直接通过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. MessengerJS

    跨文档通信解决方案 Since modern browsers have native cross-document communication method(the PostMeessage API ...

  2. Linux给MySQL创建用户,并分配权限

    //登录MYSQL 使用root账号登录 @>mysql -u root -p @>密码 //创建用户 mysql> insert into mysql.user(Host,User ...

  3. encode和decode区别

    在python2 中是这种,编解码格式.在python3 中编码是会转换成byte类型即只显示ASCII码里的,编码会将byte转换成字符串类型.因此在py3中不需要使用,如果想要特定编码,在文件开头 ...

  4. 【备忘】mybatis的条件判断用<choose>

    mybatis并没有if..else,在mybatis的sql mapper文件中,条件判断要用choose..when..otherwise.   <choose> <when t ...

  5. pytorch数据加载器

    class torch.utils.data.DataLoader(dataset, batch_size=1, shuffle=False, sampler=None, num_workers=0, ...

  6. Data type

    先放官方文档: https://dev.mysql.com/doc/refman/5.5/en/data-types.html MySQL支持多种类型的SQL数据类型:数字类型,日期和时间类型,字符串 ...

  7. redis----------linux和mac如何安装redis和启动,关闭

    1.打开官网https://redis.io/download.官网有安装命令 2.以下是我的执行过程截图 执行完官网给的命令以后,再执行  make PREFIX=/usr/local/redis ...

  8. Linux.ls 查看常用参数

    Linux.ls 查看常用参数 在linux中ls查看文件常用参数: -l :详情文件 -h : 格式化文件大小 -r :将查询的结果列表进行翻转 -S :按文件大小进行排列

  9. Ubuntu Win10双系统重启ubuntu出现黑屏情况 Ubuntu引导修复

    step 1 : 准备一个Ubuntu grub启动盘 step 2 : 进入Ubuntu启动盘的 Try Ubuntu without install step 3 : 使用终端输入以下命令,记住检 ...

  10. 字符串Contains匹配失效

    参考博客:https://blog.csdn.net/lewky_liu/article/details/79353151 在编码过程中发现一个很神奇的事情,使用String.contains方法失效 ...