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 相关文章推荐
Javascript代码实现仿实例化类
Apr 03 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
JS实现留言板功能
Jun 17 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
详解vue路由
Aug 05 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
在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版(3)
2006/10/09 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
基于JS实现的倒计时程序实例
2015/07/24 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
小程序实现分类页
2019/07/12 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python装饰器基础详解
2016/03/09 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python如何将装饰器定义为类
2020/07/30 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
中科前程Java笔试题
2016/11/20 面试题
2013的个人自我评价
2013/12/26 职场文书
《母鸡》教学反思
2014/02/25 职场文书
团代会宣传工作方案
2014/05/08 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书