vuex についての私の理解を話しましょう

vuex は、vue コンポーネントとコンポーネント間の通信の問題を解決するために存在します。 vuex は理解するのが少し複雑ですが、理解すれば簡単に使用できます:

インストール:

npm install --save vuex

いくつかの

import Vuex

を紹介します。

vuex パラメータの概要

State 初期化データを保存します

Getters State 内のデータの二次処理 (データのフィルタリングはフィルタに似ています) たとえば、State はオブジェクトを返し、そのキーの値を取得したいとします。このメソッドを使用するオブジェクト

Mutations データを計算するためのすべてのメソッドがその中に書き込まれます (computed と同様) ページ上でトリガーされるときに this.$store.commit('mutationName') を使用して、Mutations メソッドをトリガーして状態の値を変更します

ミューテーションを処理するアクションが書かれています。直接トリガーするメソッドはこれです。$store.dispatch(actionName)

まずは詳しく学ぼうとせずに、Vuex を出力してみましょう

console.log(Vuex) //Vuex为一个对象里面包含Vuex ={
    Store:function Store(){},    
    mapActions:function(){},    // 对应Actions的结果集mapGetters:function(){},    //对应Getters的结果集mapMutations:function(){},  //对应Mutations的结果集mapState:function(){},      //对应State的结果集install:function install(){}, //暂时不做讲解 installed:true //暂时不做讲解}//如果我们只需要里面的State时我们可以这样写import { mapState } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理

上記の内容を繰り返し見てください。次に、いくつかの例と公式言語の説明を示します。

State

State は、アプリケーション全体の状態データを保存する役割を果たします。通常、それを使用するときに、ストア オブジェクトをノードに挿入する必要があります。 , this.$store.state を使うと状態を直接取​​得できます

//store为实例化生成的import store from './store' new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

このストアはアプリケーション内の状態も含めたコンテナとして理解できます。ストアのインスタンス化と生成のプロセスは次のとおりです。

//./store文件const store = new Vuex.Store({
  state: {   //放置state的值
    count: 0,
    strLength:"abcd234"
  },
  getters: {   //放置getters方法
      strLength: state => state.aString.length
  },
  mutations: {   //放置mutations方法
       mutationName(state) {          //在这里改变state中的数据  state.count = 100;
       }
  },  // 异步的数据操作  actions: {      //放置actions方法
       actionName({ commit }) {          //dosomething commit('mutationName')
      },
      getSong ({commit}, id) {
          api.getMusicUrlResource(id).then(res => {
            let url = res.data.data[0].url;
        
          })
          .catch((error) => {  // 错误处理              console.log(error);
          });
      }
  }
});
export default store;

その後コンポーネントで使用するときに、対応する状態を取得したい場合は、 this.$store.state を直接使用して取得することもできます。提供されている vuex を使用します。mapState 補助関数は、

import {mapState} from 'vuex'export default {  //组件中
  computed: mapState({
    count: state => state.count
  })
}

Getters

などの計算された属性に状態をマップします。一部の状態では二次処理が必要なため、ゲッターを使用できます。 this.$store.getters.valueName を通じて派生状態にアクセスします。または、補助関数 mapGetters を直接使用して、ローカルの計算されたプロパティにマップします。

コンポーネントでの使用方法

import {mapGetters} from 'vuex'export default {  
computed: mapGetters(['strLength'])
}

ミューテーション

ミューテーションは中国語で「変化」を意味し、基本的には一意のパラメータ値の状態を受け取るデータを処理するために使用されます。 。 store.commit(mutationName) は、ミューテーションをトリガーするために使用されるメソッドです。覚えておく必要があるのは、定義されたミューテーションは同期関数である必要があるということです。そうしないと、devtool 内のデータに問題が発生し、状態の変化を追跡することが困難になる可能性があります。

コンポーネント内のトリガー:

export default {
  methods: {
    handleClick() {      this.$store.commit('mutationName')
    }
  }
}

または、補助関数mapMutationsを使用してトリガー関数をメソッドに直接マップし、要素のイベントバインディングで直接使用できるようにします。例:

import {mapMutations} from 'vuex'export default {
  methods: mapMutations(['mutationName'
  ])
}

Actions

アクションは状態を変更するために使用することもできますが、重要なことは、非同期操作を含めることができるということです。その補助関数は、mapActions です。これは、mapMutations に似ており、コンポーネントのメソッドにもバインドされています。直接トリガーすることを選択した場合は、this.$store.dispatch(actionName) メソッドを使用します。

コンポーネントで

import {mapActions} from 'vuex'//我是一个组件export default {
  methods: mapActions(['actionName',
  ])
}

プラグイン

を使用する プラグインはストアの初期化時に導入できるフック関数です。より一般的に使用されるのは、デバッグに使用される組み込みロガー プラグインです。

りー

以上がvuex についての私の理解を話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。