Vuex状態管理

2086 ワード

VuexはVue専用です.jsアプリケーション開発のステータス管理モード
使用方法:

vuexプラグイン

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

を使用

Storeインスタンス

const store = new Vues.State({
    state: {
        //  ，   vue data，        
    },
    mutations:{
        //     ，    
    },
    actions:{
        //    ，  
    }
})

を作成

vuexのいくつかのルール:

mutationsのコミットは状態を変更する唯一の方法であり、このプロセスは同期

である.

mutationは、同期関数

である必要があります.

非同期論理はactionsにカプセル化されるべきであるが、actionsはstateの中のデータを直接変更することはできず、mutationsの中の方法でstateの中のデータ

を修正するしかない.

Vuexのstoreは応答式であり、状態が変化すると監視状態のVueコンポーネントも

を自動的に更新する.

オブジェクトに新しい属性を追加する必要がある場合は、Vueを使用する.set

Vue.set(obj,'newProp','123')

mutationsでstateのデータを取得するにはどうすればいいですか?

mutationsはイベントによく似ています.各mutationには文字列のイベントタイプ(type)とコールバック関数(handler)

があります.

コールバック関数でstateにおけるデータ修正の操作を行い、stateを第1のパラメータとして受信し、残りのパラメータは第2のパラメータから

を開始することができる.

用state.XXXはstateのデータ

const store = new Vuex.Store({
    state:{
        count:1
    },
    mutations:{
        create(state, num){
            state.count += num 
        }
    }
})

にアクセスする

mutationをトリガする方法?

mutationsのhandlerは直接呼び出されません.このオプションはイベント登録のようです.タイプtypeがXXXのmutationをトリガーしたとき、この関数handler

を呼び出します.

mutation handlerを起動するには、対応するtypeでstoreを呼び出す必要があります.commitメソッド:commit

store.commit('create',100)
//  ：
store.commit({
    type:'create',
    num:100
})

VueコンポーネントでVuexステータスを取得するにはどうすればいいですか?

コンポーネントにmutationsステータス

//          vuex， router    
this.$store.commit('create',100)

をコミットする.

actionsでmutationをトリガする方法

actions: {
  increment ({ commit }) {
    commit('create')
  }
}

配信アクションは、store.dispatch方法によってトリガーされる:

store.dispatch('increment')
//      action
this.$store.dispatch('increment')

python jupyter notebookでmecabを使用するときに覚えておくと便利なこと

gridレイアウトについて