vuex についての私の理解を話しましょう-jsチュートリアル-php.cn

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

零下一度

リリース： 2017-06-26 13:30:18

オリジナル

1928 人が閲覧しました

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 サイトの他の関連記事を参照してください。