Vuex getterから返された値にデータプロパティを設定する方法

Question

以前のコンポーネントで以前にクリックした内容に応じてデータを表示するVueコンポーネントがあります。最初にクリックしたときに、私は '現在の'インデックスを設定しました。その後、次のページに行くと、データ配列を調べて '現在の'データを返すゲッターがあります。

リダイレクトされるコンポーネントは、編集できるフォームです。私は、「現在の」データをあらかじめ入力しておきたいと思っています。プレースホルダとしてではなく、実際の値として直接編集できるようにします。

問題は、ゲッターからデータ関数値に返される値をv-modelとバインドできるように設定する方法がわかりません。

HTML

<input type="text" class="form-control" id="nickname1" v-model="name" name="name"> 
<input type="text" class="form-control" id="address1" placeholder="" v-model="address" name="address" > 
<input type="text" class="form-control" id="city1" placeholder="" v-model="city" name="city" > 

VUE

data: function() { 
    return { 
     name: this.currentArea.title, 
     address: this.currentArea.address, 
     city: this.currentArea.city, 
     state: this.currentArea.state 
    } 
}, 
computed: { 
    currentArea() { return this.$store.getters.currentArea } 
} 

* this.currentArea.titleとcurrentArea.titleは動作しません。

* Iは、プレースホルダ、正しくデータが表示さバインドし、そのゲッター機能が正しくcurrentAreaを返して

Answer 1

data方法は前に計算されたプロパティが設定され、初期化時に一度発射のみされている場合。したがって、実行時にundefinedになるので、dataメソッド内から参照するcurrentAreaは機能しません。あなたが知っていれば

data() { 
    return { 
    name: '', 
    address: '', 
    city: '', 
    state: '' 
    } 
}, 
mounted() { 
    let area = this.$store.getters.currentArea; 
    this.name = area.name; 
    this.address = area.address; 
    this.city = area.city; 
    this.state = area.state;  
} 

---

または、：this.$store.getters.currentAreaは、このコンポーネントの寿命に変更することが予想されていない場合は

、それだけでmountedフックに一度データプロパティを設定するのが最も簡単でしょう

data() { 
    return this.$store.getters.currentArea; 
} 

：このコンポーネントのデータプロパティは常に currentAreaと同じであることを、あなたは、単に直接 data方法で this.$store.getters.currentAreaを返すことができます

Answer 2

@thanksd：あなたの答えに感謝します。 状態がvuexに保存され、一時的に不完全な状態でコンポーネントに送信され、フェッチによって更新されるシナリオを作成しています。 そして、フォームで編集可能にする必要があります。計算されたデータを組み合わせることにより、コンポーネントで使用する

getters: { 
 
    getItemDetail: (state, getters) => (id) => { 
 
    let item = state.openedItems.items.find(i => i.id === id); 
 
    return item ? item.data : null; 
 
    } 
 
}

および特性（深いクローニングを見る：

マイ溶液をvuexゲッターた状態の一部をエクスポートするましたlodashの助けを借りてオブジェクト）：

data() { 
 
    return { 
 
    itemDetail: null 
 
    }; 
 
}, 
 
computed: { 
 
    itemData() { 
 
    return this.$store.getters.getItemDetail(this.item.id); 
 
    } 
 
}, 
 
watch: { 
 
    itemData (n, o) { 
 
    this.itemDetail = _.cloneDeep(n); 
 
    } 
 
}

最後に、私は（私の例ではelemenスイッチを使用して、） "itemDetail" に入力をバインドします、それを私に

<el-switch v-model="itemDetail.property"></el-switch>

（私はVueのに非常に新しいです）良いと働いて妥協するようです。