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 相关文章推荐
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
JS简单计算器实例
Jan 20 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Django学习之文件上传与下载
2019/10/06 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
Flask处理Web表单的实现方法
2021/01/31 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
应届生个人求职信模板
2013/11/26 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
小学家长评语大全
2014/04/16 职场文书
工地安全生产标语
2014/06/06 职场文书
2014年消防工作总结
2014/11/21 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书