Vue コンポーネント (Vuex を含む) 間の値の転送に関する簡単な説明

<テンプレート>
    <div>
        <HELLOWORLD :needData="コンテンツ"></HELLOWORLD>
    </div>
</テンプレート>

<スクリプト>
'../components/HelloWorld.vue' から HELLOWORLD をインポートします。
エクスポートデフォルト{
    コンポーネント:{
        こんにちは世界
    },
    データ（）{
        戻る {
            コンテンツ:"コンテンツ"
        }
    }
}
</スクリプト>

<style lang="less" スコープ>

</スタイル>

<テンプレート>
    <div>
        <h1>ハローワールド</h1>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    プロパティ:["needData"],
    データ（）{
        戻る {
            H:this.needData、
        }
    },
    マウントされた(){
        コンソールにログ出力します。
    }
}
</スクリプト>

<style lang="less" スコープ>

</スタイル>

<テンプレート>
    <div>
        <HELLOWORLD @sendData="getData"></HELLOWORLD>
    </div>
</テンプレート>

<スクリプト>
'../components/HelloWorld.vue' から HELLOWORLD をインポートします。
エクスポートデフォルト{
    コンポーネント:{
        こんにちは世界
    },
    データ（）{
        戻る {
            
        }
    },
    方法:{
        getData(sonData){
            console.log("データ=>",sonData);
        },
    }
}
</スクリプト>

<style lang="less" スコープ>

</スタイル>

<テンプレート>
    <div>
        <h1>ハローワールド</h1>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            コンテンツ:"コンテンツ"
        }
    },
    マウントされた(){
        this.$emit("sendData",this.content);
    }
}
</スクリプト>

<style lang="less" スコープ>

</スタイル>

a={とする
  州： {
  	名前:"モジュールA"
  },
  //ミューテーションは特に状態属性のデータを変更するために使用されます。ミューテーション: {
  	setFun(状態、項目){
		状態名=アイテム;
	}
  }
}

デフォルトの新しいVuex.Storeをエクスポートします({
  //state はデータの保存専用ですstate: {
  	数:100,
  	コンポーネントを使用する:{
		名前:"A",
	},
	useBcomponent:"コンテンツ",
  },
  //ミューテーションは特に状態属性のデータを変更するために使用されます。ミューテーション: {
  	setStateFun(状態、項目){
		state.useBcomponent="Bコンポーネント";
	}
  },
  アクション: {
  	httpGetData(ストア、アイテム){
		タイムアウトを設定します(()=>{
			console.log(アイテム);
			store.commit("setStateFun",アイテム);
		},3000)
	}
  },
  ゲッター:{
  //ゲッター内の関数を呼び出すときにパラメータは渡されません getterFun1(state){
		state.num++ を返す
	}
  //ゲッターで関数を呼び出す場合、入力パラメータがあります gettterFun2(state){
		関数を返す(val){
			state.num+=val を返します。
		}
	}
  },
  モジュール:
  	モジュールA:a
  }
});
}

this.$store.state.state オブジェクト内のデータ。
たとえば、let val = this.$store.state.num;

this.$store.commit("関数名","データ");
たとえば、 this.$store.commit("setStateFun","testSetItem");

this.$store.dispatch("関数名","データ");
たとえば、 this.$store.dispatch("httpGetData","testItem");

this.$store.getters.関数名;
たとえば、パラメータが入力されていない場合は this.$store.getters.getterFun1;
//入力パラメータがある場合 this.$store.getters.getterFun2(123);

//モジュール オブジェクトの状態データを取得します。this.$store.state.modules オブジェクト名.state 値;
たとえば this.$store.state.ModuleA.name
//モジュール オブジェクトのミューテーション関数を使用します。this.$store.commit("関数名","入力パラメータ データ");
たとえば、 this.$store.commit("setFun","itemabc");
//ここで注意すべき点は、モジュールモジュールと外部（モジュールオブジェクトモジュールではない）のミューテーションオブジェクトに同じ名前の関数がある場合、呼び出されたときに同じ名前の両方の関数が実行されるということです。