Vuexの簡単な入門

Vuex

Vuex概念

Vuex基本使用

state状態の取得store.state

state状態の修正store.commit

actions

getters

modules

mapGetters、mapActions、mapState

を使用
参照リンク:

https://segmentfault.com/a/1190000009404727

https://segmentfault.com/a/1190000015782272

https://vuex.vuejs.org/zh/guide/mutations.html

一、Vuex概念
Vuexアプリケーションの核心はstore(倉庫)であり、storeは基本的にコンテナであり、あなたのアプリケーションの大部分の状態(state)を含んでいます.
このVuex公式サイトの言い方.
個人的な理解:
Vueのvuexはグローバルトランスフォーム管理である.stateでデータを定義し、mutationでデータを変更し、さまざまな便利な操作関数を生み出し、現在のプロジェクトのいずれかのコンポーネントでデータを取得したり、データを変更したりすることができ、変更はグローバルな応答的な変更を得ることができます.
二、Vuex基本使用

   npm install --save vuex

Vuexのインストールが完了したら、main.jsに次のコードを追加します.

 
import vuex form 'vuex'

Vue.use(vuex);

const state = {
	show:true
}

var store = new vuex.Store({ 
    state
})

new Vue({
  el: '#app',
  router,
  store, 
  template: '',
  components: { App }
})

const stateで定義されたstateオブジェクトがstore定義ステータスの場所であり、必要なステータスを定義することができます.次にstoreインスタンスに導入します.
Vueインスタンスではstoreが導入されます.
Vue.use(vuex)は、vuexがstoreオプションを使用してルートコンポーネントから各サブコンポーネントにステータスを「注入」するメカニズムを提供し、すべてのサブコンポーネントでstoreオブジェクトを直接使用できるようにするコードを参照してください.
三、state状態の取得store.state
上の栗はすでにベースのVuex storeを構築しています.
サブアセンブリは

this.$store.state.show   

stateのステータスを取得しました.たとえば

stateでより多くのデータを定義することもできます

const state = {
	show:true，
	age:18
	....  
}

管理を容易にするために、srcディレクトリの下にstoreのフォルダを新規作成し、index.jsのファイルを新規作成します.
index.js

import Vue from 'vue'
import vuex form 'vuex'

Vue.use(vuex);

const state = {
	show:true，
	age:18，
	changableNum:0
}

export default new vuex.Store({
    state 
})

main.js

//vuex
import store from './store'

new Vue({
  el: '#app',
  router,
  store,//  store
  template: '',
  components: { App }
})

これでstoreを分離しました.ステータスの取得には影響しません.
四、state状態の修正store.commit
storeオブジェクトの使用はグローバルオブジェクトの使用と似ていますか?
Vuexと単純なグローバルオブジェクトには2つの違いがあります
(1)Vuexの状態記憶は応答式である.
Vueコンポーネントがstoreから状態を読み出すと、storeの状態が変化すると、対応するコンポーネントも効率的に更新される(更新に関連するDOMがトリガーされる).
(2)storeの状態を直接変えることはできません.
storeのステータスを変更する唯一の方法は、明示的にmutationをコミットすることです.これにより、ステータスの変化を追跡しやすくなり、アプリケーションをよりよく理解するためのツールを実現することができます.
では、コミット(commit)mutationをどのように表示しますか?
storeでmutationsオブジェクトを構成する

const mutations = {
    show(state) { 
    	//     state      ，        state            (     );
        state.show = true;
    },
    hide(state) {  //  
        state.show = false;
    },
    newNum(state,sum){ 
    	//  ，        state           sum
       state.changableNum += sum;
    }
};

export default new vuex.Store({
    state, 
    mutations
})

この時、あなたは完全に使用することができます.

this.$store.commit('show')
this.$store.commit('hide')
this.$store.commit('newNum',6)

サブアセンブリでstateのshowとnewNumの値を変更しました.
五、actions
vuex公式APIでは、オブジェクト変数でもあるactionsも提供されています.

公式推奨で、非同期操作をactionに配置します.

は、複数のmutationsメソッドを実行することができる.

この中の方法はmutationsの中を非同期でトリガする方法です.
Actionsでカスタマイズした関数はcontextパラメータと変化するパラメータを受信し、contextはstoreインスタンスと同じ方法と属性を有します.
だからcontext.commit(''')を実行し、Vuex.Storeにも投げ込むことを忘れないでください.

const actions = {
   //   ac_     (     ，       )
   async ac_newNum(context,sum){ 
		 ///              、     
		  
   	 ///    mutations     newNum   state     
    	 context.commit(newNum, sum);
    }
};

export default new vuex.Store({
    state, 
    mutations，
    actions
})

実行すると直接呼び出すことができます

this.$store.dispatch('ac_newNum',6)

これにより、stateの値を変更するときに、時間のかかる操作を追加した後、commitをmutationsに追加してstateの値を変更します.
六、getters
前述の例では、stateの値(this.$store.state.xx)、同期トランザクションがstateの値(this.$.store.commit(' ',' '))、および非同期トランザクションが取得された後にstateの値(this.$store.dispatch('ac_ ',6)が変更されることが知られている`).
もう1つのオブジェクト属性:gettersgetters  vueの  computed  同様に、stateを計算し、新しいデータ(ステータス)を生成するために使用される.

computed(){
    not_show(){
        return !this.$store.state.show;
    }
}

では、多くのコンポーネントでshowとは正反対の状態を使用する必要がある場合は、多くのコンポーネントを書く必要があります.  not_show  , 使用  getters  このような問題を解決することができます.

const getters = {
 	not_show(state){//   state       state
		 return !state.show;
   }，
   getChangableNum(state){
   	return state.changableNum + 100;	}
};

export default new vuex.Store({
    state, 
    mutations，
    actions，
    getters
})

では、私たちは

this.$store.getters.getChangableNum
this.$store.getters.not_show

**注意: **$store.getters.not_show の値は直接変更できませんが、対応するstateが変化してから変更する必要があります.
要するに、gettersはstateに関連付けられた属性オブジェクトを生成するために使用され、
これまでVuex storeの4つの基本オブジェクト属性について基本的に理解してきました

state

getters

mutations

actions

七、modulesモジュール化
このmodulesでは
index.js

const state = {
	show:true，
	age:18，
	changableNum:0
}

const mutations = {
    show(state) { 
    	//     state      ，        state            (     );
        state.show = true;
    },
    hide(state) {  //  
        state.show = false;
    },
    newNum(state,sum){ 
    	//  ，        state           sum
       state.changableNum += sum;
    }
};

const actions = {
   //   ac_     (     ，       )
   async ac_newNum(context,sum){ 
		 ///              、     
		  
   	 ///    mutations     newNum   state     
    	 context.commit(newNum, sum);
    }
};

const getters = {
 	not_show(state){//   state       state
		 return !state.show;
   }，
   getChangableNum(state){
   	return state.changableNum + 100;	}
};

export default new vuex.Store({
    state, 
    mutations，
    actions，
    getters
})

main.js

//vuex
import store from './store'

new Vue({
  el: '#app',
  router,
  store,//  store
  template: '',
  components: { App }
})

複数modulesの場合
index.jsの変化は以下の通りです.

import Vue from 'vue'
import vuex form 'vuex'

Vue.use(vuex);

import a_store from '../components/a_store.js';//    store  
import b_store from '../components/b_store.js';//    store  

export default new vuex.Store({
    modules: {
        a_store: a_store,
        b_store: b_store
    }
})

a_でstore.jsとb_store.jsで

export default {
	 state, 
    mutations，
    actions，
    getters
}

この2つのJSを導入することで,コンポーネントの状態を単独で書くことができるようになった.
八、mapGetters、mapMutation、mapActions、mapState使用
振り返ってみると、ステータスをクエリーしたり変更したりするときは、このように操作されていますか?

this.$store.state.属性名

this.$store.commit('mutationオブジェクトのメソッド名','パラメータ')

this.$store.dispath('actionsオブジェクトのメソッド名','パラメータ')

this.$store.getters('gettersオブジェクトのメソッド名','パラメータ')

この書き方は非常に煩雑で、私たちがvuexを使用していないときに便利ではありません. this.show、1つの方法を実行するには this.switch_dialog いいですよ.vuexを使って書き方を複雑にしましたか.mapState、mapGetters、mapActions、mapMutationの使用 こんなに複雑ではありません.
mapStateを例にとると、
mapStateを取得するか、属性を計算して取得するか、直接値を割り当てるかはよく知られています.

computed:{
     ...mapState([
      'show',
      'age'
    ])，
  }

これでdata()関数のパラメータと変わらない.
mapGetters 一般的には computed で、 mapActions、mapMutation 一般的には methodsで.
mapState、mapGettersによって計算プロパティに値が割り当てられ、mapActions、mapMutationは一般的にmethodsで呼び出しをトリガーします.
もちろんこれは単一modulesに対する書き方です.しかし、マルチmodulesの書き方であれば、これらの関数にも対応する変化があります.
やはりmapStateで例を挙げます

mapState('a_store',[])
mapState('b_store',[])

基本的にここでは、基本的なVuexの使い方について、あまりよく知られていないはずですが、後期に時間があれば、もっと深く研究することができます.特にmapState、mapMutationといった関数は、初めて見たときはごまかしてしまうかもしれませんが、原理を知ってからは、実はそうなのですが、徐々に仕事に応用するとますます安く感じられます.