vuex中的getter值赋值给vue组件里的data

通过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>

 

 


版权声明:本文为w845386392原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。