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 でバージョン番号を隠したり偽造したりする方法
最近、データライフサイクル管理の詳細を整理していたときに、小さな問題を発見しました。それは、MySQ...
この記事では、ドラッグプログレスバーを実現するためのVueの具体的なコードを例として紹介します。具体...
Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...
質問1 解決するサービスを開始します: service mysqld start; /sbin/ip...
通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...
1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...
Mysqlリモート接続構成を実装する2つの方法会社で働いていると、誰かのコンピュータに保存されている...
目次1. バブルソートとは何か2. 例を挙げるラウンド1:第2ラウンド:第3ラウンド:第4ラウンド:...
タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...
目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...
目次序文最適化変数の抽出二次包装 el-tag コンポーネント使用要約する序文バックエンドシステムの...
英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...
コードをコピーコードは次のとおりです。 <object classid="clsid...
MySQL公式サイトのダウンロードアドレス: https://dev.mysql.com/downl...
MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...