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 Eval 函数使用
Mar 23 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
js函数和this用法实例分析
Mar 13 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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中函数的形参与实参的问题说明
2010/09/01 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
JS上传前预览图片实例
2013/03/25 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
React中this丢失的四种解决方法
2019/03/12 Javascript
python实现文件快照加密保护的方法
2015/06/30 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Django框架模板的使用方法示例
2019/05/25 Python
树莓派实现移动拍照
2019/06/22 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
公积金单位接收函
2014/01/11 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
仓库管理制度范本
2015/08/04 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis