1. コンポーネントまたはインターフェース内の vuex の getter を呼び出すために mapGetter を使用しないでください。1.1 マッピングのルートストアでゲッターを呼び出す<!-- test.vue --> <テンプレート> <div class="vuexResponse"> <div @click="changeVal">クリック</div> <div>"stateHello: "{{stateHello}}</div> <div>"gettersHello: "{{gettersHello}}</div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 時計: gettersHello(newVal, oldVal) { console.log("gettersHello newVal", newVal); console.log("gettersHello oldVal", oldVal); } }, 計算: { ステートハロー() { これを返します。$store.state.stateHello }, ゲッターHello() { これを返します。$store.getters.gettersHello } }, メソッド: { 変更値() { this.$store.commit("mutationsHello", 2) } } } </スクリプト> /** * ストア */ 'vue' から Vue をインポートします 'vuex' から Vuex をインポートします Vue.use(Vuex) デフォルトの新しいVuex.Storeをエクスポートします({ 州: { 状態こんにちは: 1 }, ゲッター: { gettersHello: (状態) => { state.stateHello * 2 を返す } }, 突然変異: 変異Hello(状態、値) { console.log("val", val); // 2 state.stateHello += val } }, }) プロセス: クリックして、test.vue インターフェースで changeVal() を呼び出します。changeVal メソッドは、パラメータ val を commite に渡し、store.js で mutationsHello() メソッドを呼び出します。mutationsHello メソッドは、state の stateHello の値を変更します。stateHello の値は、getters の gettersHello で監視されます。stateHello の値の変更により、gettersHello がトリガーされます。計算された test.vue インターフェースでは、store.getters.gettersHello が計算され、gettersHello が store.gettes.gettersHello の値にマップされます。GettersHello は、テンプレートを通じて dom にレンダリングされます。同時に、gettersHello の変更により、watch で gettersHello がトリガーされ、store.getters.gettersHello のデータの変更が監視されることもあります。 1.2 マッピングモジュールのモジュールストアでゲッターを呼び出す<!-- moduleTest.vue --> <テンプレート> <div class="vuexResponse"> <div @click="changeVal">クリック</div> <div>stateHello: {{stateHello}}</div> <div>gettersHello: {{gettersHello}}</div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 時計: gettersHello(newVal, oldVal) { console.log("gettersHello newVal", newVal); console.log("gettersHello oldVal", oldVal); } }, 計算: { ステートハロー() { これを返します。$store.state.vuexTest.stateHello }, ゲッターHello() { this.$store.getters['vuexTest/gettersHello'] を返します。 } }, メソッド: { 変更値() { this.$store.commit("vuexTest/mutationsHello", 2) } } } </スクリプト> /** * モジュール vuexTest.js */ エクスポートデフォルト{ 名前空間: true、 州: { 状態Hello: 1, }, ゲッター: { gettersHello: (状態、ゲッター、ルート状態、ルートゲッター) => { console.log("状態", 状態); console.log("ゲッター", ゲッター); コンソールにログ出力します。 コンソールにログ出力します。 state.stateHello * 2 を返す } }, 突然変異: 変異Hello(状態、値) { コンソールログ("1111"); console.log("val", val); state.stateHello += val } }, アクション: { } } computed のマッピング モジュールでゲッターを計算する方法は、モジュールの状態のデータを取得する方法とは異なることに注意してください。 this.$store.getters['vuexTest/gettersHello'] 2. mapGetterを使用して、コンポーネントまたはインターフェース内のvuexのゲッターを呼び出す2.1 マッピングのルートストアでゲッターを呼び出す/** * ストア */ 'vue' から Vue をインポートします 'vuex' から Vuex をインポートします Vue.use(Vuex) デフォルトの新しいVuex.Storeをエクスポートします({ 州: { 状態こんにちは: 1 }, ゲッター: { gettersHello: (状態) => { state.stateHello * 2 を返す } }, 突然変異: 変異Hello(状態、値) { state.stateHello += val } }, }) <!-- テスト.vue --> <テンプレート> <div class="vuexResponse"> <div @click="changeVal">クリック</div> <div>stateHello: {{stateHello}}</div> <div>gettersHello: {{gettersHello}}</div> <div>gettersHelloOther {{gettersHelloOther}}</div> </div> </テンプレート> <スクリプト> 「vuex」から mapGetters をインポートします。 エクスポートデフォルト{ 名前: "vuexReponse", コンポーネント: }, データ() { 戻る { } }, 時計: gettersHello(newVal, oldVal) { console.log("gettersHello newVal", newVal); console.log("gettersHello oldVal", oldVal); } }, 計算: { ステートハロー() { これを返します。$store.state.stateHello }, ...mapGetters(["gettersHello"]), // 配列形式...mapGetters({ // オブジェクト形式 gettersHello: "gettersHello" })、 ...mapGetters({ gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }), }, メソッド: { 変更値() { this.$store.commit("mutationsHello", 2) } } } </スクリプト> 2.2 マッピングのルートストアでゲッターを呼び出す/** * vuexTest.js */ エクスポートデフォルト{ 名前空間: true、 州: { 状態Hello: 1, }, ゲッター: { gettersHello: (状態、ゲッター、ルート状態、ルートゲッター) => { console.log("状態", 状態); console.log("ゲッター", ゲッター); コンソールにログ出力します。 コンソールにログ出力します。 state.stateHello * 2 を返す } }, 突然変異: 変異Hello(状態、値) { コンソールログ("1111"); console.log("val", val); state.stateHello += val } }, アクション: { } } <!-- モジュール test.vue --> <テンプレート> <div class="vuexResponse"> <div @click="changeVal">クリック</div> <div>stateHello: {{stateHello}}</div> <div>gettersHello: {{gettersHello}}</div> <div>gettersHelloOther {{gettersHelloOther}}</div> </div> </テンプレート> <スクリプト> 「vuex」から mapGetters をインポートします。 エクスポートデフォルト{ 名前: "vuexReponse", 時計: gettersHello(newVal, oldVal) { console.log("gettersHello newVal", newVal); console.log("gettersHello oldVal", oldVal); } }, 計算: { ステートハロー() { これを返します。$store.state.vuexTest.stateHello }, ...mapGetters(["vuexTest/gettersHello"]), // 配列形式...mapGetters("vuexTest", { // オブジェクト形式 gettersHello: "gettersHello" })、 ...mapGetters("vuexTest", { gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }), }, メソッド: { 変更値() { this.$store.commit("vuexTest/mutationsHello", 2) } } } </スクリプト> これら 3 つの形式...mapGetters(["vuexTest/gettersHello"]), // 配列形式...mapGetters("vuexTest", { // オブジェクト形式 gettersHello: "gettersHello" })、 ...mapGetters("vuexTest", { gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }), これで、vuex の補助関数 mapGetters の基本的な使い方についての記事は終了です。vuex mapGetters の使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ユニークインデックスの S ロックと X ロックによる MySQL デッドロック ルーチンの理解
>>: Nginx でバージョン番号を隠したり偽造したりする方法
1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...
目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...
選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...
この記事では、主にReact + three.jsテクノロジースタックを使用して3Dモデルの読み込み...
目次1. 結論から始めましょう2. キーの役割2.1 例2.2 上記の例を修正する2.3 例を再度修...
目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...
SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...
目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...
コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...
オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...
いくつかの簡単な Linux コマンドを使用すると、ストレージまたは電子メールの添付ファイルのサイズ...
注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...
1. ポート 80 が占有されているかどうかを確認します。通常、ポート 80 は Apache サー...
a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...
mongoイメージを取得する sudo docker pull mongo mongodbサービスを...