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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
Vue 幸运大转盘实现思路详解
May 06 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验证码(支持中文)
2007/02/14 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python读写文件基础知识点
2019/06/10 Python
简单了解python关系(比较)运算符
2019/07/08 Python
pytorch 预训练层的使用方法
2019/08/20 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
历史系毕业生自荐信
2013/10/28 职场文书
卫校毕业生自我鉴定
2013/10/31 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
考核评语大全
2014/04/29 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
家长通知书家长意见
2014/12/30 职场文书
植物园观后感
2015/06/11 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL