vuex 实现getter值赋值给vue组件里的data示例


Posted in Javascript onNovember 05, 2019

通过watch将orderDetailsData对象赋值给data中的consignee对象,这样能将操作能避免v-model修改时,直接改动vuex中的值。

<template>
 <input type="text" placeholder="请输入收货人名字" v-model="consignee.name">
 <input type="text" placeholder="请输入收货地址" v-model="consignee.address">
 <input type="text" placeholder="请输入收货人手机号" v-model="consignee.mobile">
</template>
 
<script>
 data () {
  return {consignee: {}}
 },
 
 computed:{
  ...mapGetters([
   'orderDetailsData',
  ])
 },
 
 watch: {
  orderDetailsData: {
   handler: function (val, oldVal) {
    this.consignee.name = val.consignee; //收货人名字
    this.consignee.address = val.address; //收货人地址
    this.consignee.mobile = val.mobile; //收货人电话
   },
   deep: true
  }
 }
 
<script>

以上这篇vuex 实现getter值赋值给vue组件里的data示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 #Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 #Javascript
vue input标签通用指令校验的实现
Nov 05 #Javascript
vue子传父关于.sync与$emit的实现
Nov 05 #Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 #Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 #Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 #Javascript
You might like
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
document.write的几点使用心得
2014/05/14 Javascript
javascript模拟命名空间
2015/04/17 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python random模块的使用示例
2020/10/10 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
群众路线教育实践活动方案
2014/02/02 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
模具专业自荐信
2014/05/29 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
英语通知范文
2015/04/22 职场文书
孝女彩金观后感
2015/06/10 职场文书
Python制作表白爱心合集
2022/01/22 Python
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js