vue 2+vuex+vue-routerクイック入門(五)vuex紹介

vuex
VuexはVue専用です.jsアプリケーションが開発したステータス管理モードは、集中型ストレージ管理アプリケーションのすべてのコンポーネントのステータスを採用し、対応するルールでステータスが予測可能な方法で変化することを保証します.『クイックエントリー(一)』では、Vuexをすべてのコンポーネントの共通の状態(state)を保存するグローバルオブジェクト(store)として簡単に抽象化することができます.ただし、このグローバルオブジェクトは直接読み書きできません.特殊な読み書きルートが必要です.
vuexでのチャネルの書き込みには、Mutations同期設定とActions非同期設定に分けてユーザー定義が必要です.
Vuex宣言と注入

Vue.use(Vuex);

export default  new  Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})

ルートコンポーネントで呼び出されます

import store form './store'

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

以上、Vuexの申明とVueへの注入を完了しました.まず、Vuexを申請しているのを見てみましょう.Storeでは、それぞれが表す意味です.
State
倉庫Storeのルート状態を保存します.フォーマットは次のとおりです.

export default {
    token: null, //         ,
    newCredit:false,
    loading: {
        show: false,
        msg: ''
    },
    dialogMsg: {
        msgShow: false,
        msg: '',
        timeout: null
    }
}

あなたは間違っていません.簡単な相手です.これらは、プロジェクト全体で共有する必要があるステータスです.
Mutations
stateの状態を変更する必要がある場合は、Mutationsを借りる必要があります.Mutationsはstateを同期的に変更する方法を提供してくれた.

import {
    SHOW_LOADING,
    HIDE_LOADING,
    SHOW_NEW_CREDIT,
    HIDE_NEW_CREDIT,
} from './mutationTypes'


export default {
    [SHOW_LOADING](state,msg){
        state.loading = {
            show:true,
            msg
        }
    },
    [HIDE_LOADING](state){
        state.loading = Object.assign(state.loading, {show:false});
    },
    [SHOW_NEW_CREDIT](state){
        state.newCredit = true;
    },
    [HIDE_NEW_CREDIT](state){
        state.newCredit = false;
    }
}

上の例から,Mutationsは個々の関数からなり,関数の最初のパラメータはstateであることが分かった.上に私たちが明らかにしたStateオブジェクトを指します.2番目のパラメータは新しい値です.関数内で同期化された付与プロセスが実行されます.それから関数名は少し変で、Mutations関数の管理を容易にするために、関数名を独立したファイルで提供します(これは小さな問題です).
Actions
ActionsはMutations構造と同様にいくつかの関数を提供しているが,Actionsは主に非同期でStateを修正するために生まれた.

import {
  SET_DIALOG_MSG,
  SET_DIALOG_MSG_SHOW,
  SET_DIALOG_MSG_TIMEOUT
} from './mutationTypes'

export default {
  setDialogMsg({commit, state},msg){
    commit(SET_DIALOG_MSG,msg);
    commit(SET_DIALOG_MSG_SHOW,true);

    if(state.dialogMsg.timeout){
      clearTimeout(state.dialogMsg.timeout);
    }

    commit(SET_DIALOG_MSG_TIMEOUT,setTimeout(() =>{
      // this.msg = '';
      commit(SET_DIALOG_MSG_SHOW,false);
    },1500))
  }
}

Actions関数も2つのパラメータを受け入れ,2番目のパラメータはMutations関数と同様にstateの新しい値である.最初のパラメータはcontentオブジェクトで、commit関数とstateオブジェクトを含めることができます.前者はMutationsをトリガするのに役立ち、stateのデータのみを読み込むのに役立ちます.
最後にState状態を修正したのはMutations関数であり,Actionsは非同期で呼び出されただけであることが分かった.
Getters
GettersはStateの補完であり、Stateからいくつかの値を派生させる必要があり、複数のコンポーネントが同時にこの派生を使用する必要がある場合、この派生をGettersに抽出することができます.

export default{
doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

Modules
現在紹介している共有状態は,ルート状態ツリーに直接保存されているため,stateが肥大化することは必至である.以上の問題を解決するために、Vuexはstoreをモジュールに分割することを許可します.各モジュールには、state、mutation、action、getter、さらにはネストされたサブモジュールがあります.上から下まで同じように分割されます.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA    
store.state.b // -> moduleB    

Storeの使用
Storeを明示する際のState,Mutations,Actions,Gettersの役割について述べた.次に、Vueプロジェクトでこれらのステータスまたはメソッドをどのように参照するかを見てみましょう.
mapState補助関数
グローバル共有ステータスをローカルコンポーネントに導入するのに役立ちます.

//                Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: {
    ...mapState({
    //            
    count: state => state.count,

    //        'count'     `state => state.count`
    countAlias: 'count',

    //        `this`       ，        
    countPlusLocalState (state) {
    return state.count + this.localCount
    }

    //    loan       。
    loanMoney:state => state.loan.money
    })
  }
}

マッピングされた計算属性の名前がstateのサブノード名と同じである場合、mapStateに文字列配列を渡すこともできます.

computed: {
    ...mapState([
        //    this.count   store.state.count
        'count'
    ])
}

mapGetters補助関数.
使用方法はmapStateと同じです.
mapMutations補助関数
コンポーネントでthis.$を使用できます.store.commit(「xxx」)はmutationをコミットするか、mapMutations補助関数を使用してコンポーネント内のmethodsをstoreにマッピングする.commit呼び出し(ルートノードにstoreを注入する必要があります).

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' //    this.increment()   this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' //    this.add()   this.$store.commit('increment')
    })
  }
}

なお、mutationsがルートstateのmutationsであるかmoduleのmutationsであるかを区別しないのは同じ導入方式である.
mapActions補助関数
使用方法とmapMutations
参照ドキュメント:
vueチュートリアルvue-loaderチュートリアルvuexチュートリアル