vueの補助機能とは何ですか?

Vue の補助関数は次のとおりです: 1. mapState (グローバル状態管理の状態値をコンポーネントの計算されたプロパティにマップします); 2. mapGetter (グローバル状態管理のゲッター値をコンポーネントの計算されたプロパティにマップします)コンポーネント、3.mapActions、4.mapMutations。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

1.Vue の補助関数

mapState、mapGetters、mapActions、mapMutations

• mapState はグローバル状態の状態を管理します値はコンポーネントの計算されたプロパティにマップされます

• #mapGetters グローバル状態管理のゲッター値をコンポーネントの計算されたプロパティにマップします

#mapMutation ミューテーションの値をマッピングします。 メソッドにマッピングします。
#mapActions アクションの値をメソッドにマッピングします。
#2 .mapState 補助関数

#mapState

とは何ですか?公式の説明は次のとおりです。

#コンポーネントが複数の状態を取得する必要がある場合、これらの状態を計算されたプロパティとして宣言することは、いくぶん反復的で冗長になります。この問題を解決するには、mapState 補助関数を使用して、計算されたプロパティを生成し、より少ないキーを押すことができるようにします。

最初にこの説明を見たとき、あなたは次のように感じたかもしれません。非常に空虚で、理解するのが難しい。計算プロパティの生成とは何ですか?押すキーの数を減らしますか? ? ?

mapState は状態を表すシュガー構文です。シュガー構文とは何ですか? シュガー構文についての私の理解では、私はすでに操作に非常に習熟しており、この操作に問題はありません。なぜ so を使用するのでしょうか? -「より良い、より良い運用」と呼ばれていますか？

3. 使用方法

mapState を使用する前に、この補助関数をインポートする必要があります。

import { mapState } from 'vuex'

使用方法

<script>
import { mapState } from &amp;#39;vuex&amp;#39;
export default {
  data () {
    return {
      str: &#39;国籍&#39;,
      dataCount: this.$store.state.count
    }
  },
  computed: mapState({
    count: &#39;count&#39;, // 第一种写法
    sex: (state) => state.sex, // 第二种写法
    from: function (state) { // 用普通函数this指向vue实例,要注意
      return this.str + &#39;:&#39; + state.from
    },
    // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
    // from: (state) => this.str + &#39;:&#39; + state.from
    myCmpted: function () {
      // 这里不需要state,测试一下computed的原有用法
      return &#39;测试&#39; + this.str
    }
  }),
  methods: {
    increment () {
      this.$store.commit(&#39;increment&#39;)
    },
    decrement () {
      this.$store.commit(&#39;decrement&#39;)
    }
  }
}
</script>

computed

mapState 関数の戻り値を受け取ることができます。コード内で 3 つのメソッドを使用して、それを受け取りますstore の の値はコメントで確認できます。 後でmapStateを使用したい場合はどうすればよいですか?実際には非常に単純です

//之前的computed
computed:{
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ........
}
//引入mapState辅助函数之后
 
computed:mapState({
    //先复制粘贴
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再维护vuex
    count:'count'
    })

4. オブジェクト展開演算子

...mapState は mapState の拡張ではありませんが...オブジェクト展開演算子の拡張です。

//之前的computed
computed:{
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ........
}
//引入mapState辅助函数之后
 
computed:{
    //原来的继续保留
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再维护vuex
    ...mapState({  //这里的...不是省略号了,是对象扩展符
        count:'count'
    })

mapState

、

mapGetters、mapActions、および mapMutations の使用方法は似ています。 。 。 [関連する推奨事項:「vue.js チュートリアル

」]

以上がvueの補助機能とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。