vuexとコンポーネントdataの間のデータ同期更新方式を実現します。

問題
私達はすべて知っていて、Vueコンポーネントの中で、data部分のデータとビューの間は同時に更新することができて、もし私達はdataの中のデータを更新したら、ビューの上のデータは同時に更新されます。
私たちはVuexを使う時には、ビュー上で$store.state.[DataKey]を通してVuexのstateのデータを取得することもできます。そして、stateのデータが変化すると、ビュー上のデータも同期して更新することができます。これは順調に見えます。
しかし、私たちはstateのデータをVueコンポーネントのdataに結び付けたいと思っています。そして、ビューでdataを呼び出します。

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 data() {
 return {
  userInfo: this.$store.state.userInfo;
 };
 }
};
</script>

そうすれば、スタントの中のuserInfoを変更すると、ビューは更新されません。対応するdataの中のuserInfoも変更されません。このような呼び方は非常規です。
Vueはコンポーネントのロードが完了する前に、dataの中のすべてのデータを初期化しました。その後は受動的にデータだけを変更します。しかし、コンポーネントデータの初期化が完了した後、stateのデータが変更されても、dataのデータはバインディング関係ではなく、データ初期化段階でstateのデータを呼び出しただけなので、taのデータはstateのデータによって変更されることはない。
したがって、ビュー上でstateのデータと同期して更新したい場合は、以下のようにするしかないです。

<template>
 <div>{{$store.state.userInfo}}</div> 
</template>

解決
私たちがダタにstateのデータを結びつけて、stateを駆動させてダタを変えたいなら、私たちはどうすればいいですか？
次の2つの方法を試してみてもいいです。
1.computed属性を使ってstateのデータを取得する
この方法は、データを呼び出すのではなく、コンポーネントのための計算機能を追加します。computtedは通常、複雑なデータの計算に用いられますが、実際には関数の内部で予算を計算した後、演算結果を返します。同時に重要な特性があります。その内部で予算が必要なデータが変更された場合、データを再計算して結果を返します。したがって、私たちはcomputtedでstateのデータに戻ります。stateのデータが変わったら、computtedは感知して、再度stateのデータを取得して、新しい値に戻ります。

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 computed: {
 userInfo(){
  return this.$store.state.userInfo;
 }
 }
};
</script>

2.ウオッチを使ってstateのデータをモニターする
このようによく理解されているのは、コンポーネントのwatch属性を通じて、stateの中のあるデータに傍受を追加し、データが変更されたときに傍受イベントをトリガし、傍受イベント内部でdataの対応するデータを変更すれば、dataのデータをstateのデータによって変更することができます。

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 data() {
 return {
  userInfo: this.$store.state.userInfo;
 };
 },
 watch: {
 "this.$store.state.userInfo"() {
  this.userInfo = this.$store.getters.getUserInfo; //             getters     
 }
 }
};
</script>

以上のように、vuexとコンポーネントdataとの間のデータ同期の更新方法は、小編集が皆さんに提供しているすべての内容です。参考にしていただければ、よろしくお願いします。