Vuexクイックスタート

Vuexクイックスタート
基本的な用途:

は、いくつかのdataをコンポーネント間で共通の状態にする、コンポーネントはいつでもアクセスおよび応答することができ、propsの値伝達チェーン応答のコード冗長

を解決する.

状態に共通の方法を割り当てる、状態の変更をタイムリーに応答して

を処理する.
基本的な使い方:
/store/store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        sideBarOpened: false
        //      
    },
    getters: {
        changeState: state => {
            //   vue    methods,      data
            // vuex          
        }
    },
    mutations: {
        //   getters   
        //      vuex          
        //     this.$store.commit('   ')      ，      
        //           (  )
    },
    actions: {
        //  mutations        ，        
        increment ({ commit }, payload) {
            commit('     ')
            //payload       ，                        vuex
        },
        asyncIncrement({commit}) => {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    },
    modules: {
        //     state        ，          ，        
    }
});

main.js

import { store } from './store/store'
*
*
new Vue({
  el: '#app',
  store,    //     
  ...
})

vuexのデータとメソッドへのアクセス

this.$store.state.   
this.$store.getters.   

影響を受けるコンポーネントのローカル定義計算属性応答変化データ

computed: {
     open () {
          return this.$store.state.sideBarOpened
     }
}

storeのgetters/mutationsをローカルにマッピングする(属性/メソッドを計算する)mapGetters/mapMutations補助関数を使用する

import { mapGetters } from 'vuex'

computed: {
  //            getters    computed    
    ...mapGetters([
        //   this.doneTodosCount   store.getters.doneTodosCount
      'doneTodosCount',
      //'getter  ',

      //    this.doneCount   store.getters.doneTodosCount
        doneCount: 'doneTodosCount'
      //                ，                 
      //      babel-preset-stage-2
    ])
  }

注意事項:
mutationは同期関数でなければなりません.devtoolはスナップショットを保存し、状態の変化を追跡しやすくします.
v-modelバインドvuex計算プロパティを使用する場合はgetとsetを設定して双方向にバインドします

computed: {
    value: {
        get () {
            return this.$store.getters.value;
        },
        set (event) {
            this.$store.dispatch('updateValue', event.target.value);
        }
    }
}