vuexがgetter値を実現し、vueコンポーネント内のdataに値を付与する例

watchでordedentilsDataオブジェクトを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の例は小編集が皆さんに共有した内容の全部です。参考にしていただければと思います。どうぞよろしくお願いします。