vuex入門ドキュメント

vueを使っている場合はjs、ではvueコンポーネント間の通信がクラッシュする可能性があると思います.
vueベースを使用しています.jsのUIフレームワークElementUIがウェブサイトを開発したとき、このような問題に遭遇しました.1ページに多くのフォームがあり、フォームを単一ファイルコンポーネントにしようとしましたが、フォーム(サブコンポーネント)のデータとページ(親コンポーネント)ボタンがやり取りすると、それらの間の通信が面倒になります.

import dialog from './components/dialog.vue'
export default {
  data(){
    return {
      show:false
    }
  },
  components:{
    "t-dialog":dialog
  }
}







export default {
  props:['show'],
  computed:{
      currentShow:{
          get(){
              return this.show
          },
          set(val){
              this.$emit("update:show",val)
          }
      }
  }
}

親コンポーネントはpropsでサブコンポーネントにパラメータを渡すことができますが、サブコンポーネント内では親コンポーネントから渡されたパラメータを直接変更することはできません.
この場合、vuexを使用すると、この問題を簡単に解決できます.

import dialog from './components/dialog.vue'
export default {
  components:{
    "t-dialog":dialog
  }
}







export default {}

ずいぶん便利になったのではないでしょうか.これがvuexの最も簡単な応用です.
vuexのインストール、使用
まずvuexをインストールします.

npm install vuex --save

そして、main.jsに追加:

import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({//store  
    state:{
        show:false
    }
})

上記の例の$storeに進む.state.ショーで使えます.
modules
前は便利のためにstoreオブジェクトをmainに書きました.jsの中ですが、実際には後日のメンテナンスを容易にするために、別々に書いたほうがいいです.srcディレクトリの下にstoreフォルダを新規作成し、中にindexを新規作成します.js :

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

export default new vuex.Store({
    state:{
        show:false
    }
})

それで、main.jsのコードは次のように変更する必要があります.

//vuex
import store from './store'

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

これでstoreを分離しました.もう一つの問題は、ここ$storeです.state.showはどのコンポーネントでも使用できますが、そのコンポーネントが多くなると、ステータスも多くなり、storeフォルダの下のindexに積み上げられます.jsがメンテナンスしにくい場合はどうすればいいですか?
vuexのmodulesを使用してstoreフォルダの下のindexを使用することができます.js変更:

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

import dialog_store from '../components/dialog_store.js';//    store  

export default new vuex.Store({
    modules: {
        dialog: dialog_store
    }
})

ここではdialogを引用しましたstore.js、このjsファイルではdialogコンポーネントの状態を単独で書くことができます.

export default {
    state:{
        show:false
    }
}

このような修正をした後、私たちは前に使用したstoreを使います.state.dialog.ショーでいいです.
他のコンポーネントがvuexを使用する必要がある場合は、対応するステータスファイルを新規作成し、storeフォルダの下のindexに追加します.jsファイルのmodulesにあります.

modules: {
    dialog: dialog_store,
    other: other,//    
}

mutations
前に述べたダイアログの例では、vuexへの依存は1つの$storeにすぎません.state.dialog.showは1つの状態ですが、私たちが1つの操作を行うには、多くの状態に依存する必要があります.管理するのはまた面倒です.
mutationsが登場し、問題は解決した.

export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//   state       state
            state.show = state.show?false:true;
            //                state
        }
    }
}

mutationsを使用すると、元の親コンポーネントを次のように変更できます.

import dialog from './components/dialog.vue'
export default {
  components:{
    "t-dialog":dialog
  }
}

$storeを使用します.commit('switch_dialog')はmutationsのswitch_をトリガーします.dialogメソッド.
ここで注意しなければならないのは、
mutationsの方法はコンポーネントを区別しないで、もしあなたがdialog_にいたらstroe.jsファイルの定義switch_dialogメソッド、他のファイルのswitch_では$store.commit('switch_dialog')はすべてのswitchを実行します.dialogメソッド.mutationsの操作は同期しなければならない.mutationsで非同期操作を実行すると何が起こるのか、実際には何も奇妙なことは起こらないのではないかと気になるに違いありません.ただ、公式のお勧めで、mutationsで非同期操作を実行しないでください.
actions
複数のstateの操作は、mutationsを使用してトリガするとメンテナンスが容易になります.複数のmutationsを実行するにはactionが必要です.

export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//   state       state
            state.show = state.show?false:true;
            //                state
        }
    },
    actions:{
        switch_dialog(context){//   context      $store          
            context.commit('switch_dialog');
            //            mutations  
        },
    }
}

では、前の親コンポーネントでは、actionのswitch_をトリガーするために修正する必要があります.dialogメソッド:

import dialog from './components/dialog.vue'
export default {
  components:{
    "t-dialog":dialog
  }
}

$storeを使用します.dispatch('switch_dialog')はactionのswitch_をトリガーします.dialogメソッド.
公式推奨では、非同期操作をactionに配置します.
getters
gettersはvueのcomputedと同様にstateを計算して新しいデータ(ステータス)を生成するために使用されます.
前の例では、ステータスショーとは正反対のステータスが必要であれば、vueのcomputedを使用して計算できます.

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

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

export default {
    state:{//state
        show:false
    },
    getters:{
        not_show(state){//   state       state
            return !state.show;
        }
    },
    mutations:{
        switch_dialog(state){//   state       state
            state.show = state.show?false:true;
            //                state
        }
    },
    actions:{
        switch_dialog(context){//   context      $store          
            context.commit('switch_dialog');
            //            mutations  
        },
    }
}

コンポーネントでstoreを使用します.getters.not_showでステータスを取得するnot_show .
注意:$store.getters.not_showの値は直接修正できないので、対応するstateが変化してから修正する必要があります.
mapState、mapGetters、mapActions
多くの場合、store.dispatch('switch_dialog')という書き方は長くて臭いので不便で、vuexを使っていないときは、この状態を取得するにはthisしか必要ありません.show、1つの方法を実行するにはthisしか必要ありません.switch_dialogでいいですが、vuexを使って書き方を複雑にしましたか?
mapState、mapGetters、mapActionsを使うとそんなに複雑ではありません.
mapStateを例にとると、

import {mapState} from 'vuex';
export default {
  computed:{
    //        :      
    ...mapState({
      show:state=>state.dialog.show
    }),
  }
}

次のようになります.

import {mapState} from 'vuex';
export default {
  computed:{
    show(){
        return this.$store.state.dialog.show;
    }
  }
}

mapGetters、mapActions、mapStateは類似しており、mapGettersもcomputedに書かれ、mapActionsはmethodsに書かれるのが一般的である.
これらを理解すれば、vuexドキュメントを読むことができます.理解できるはずです.