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 Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
简述JS控制台的使用
Jul 15 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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
substr()函数中文版
2006/10/09 PHP
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP生成静态页面详解
2006/12/05 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python中变量交换的例子
2014/08/25 Python
python字典改变value值方法总结
2019/06/21 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
物流专业大学生求职信范文
2013/10/28 职场文书
致400米运动员广播稿
2014/02/07 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python