vueの状態管理モードvuex

vuexはvue.jsのために設計された状態管理モードであり、devtoolsを使ってデバッグすることもできます。
備考：本明細書の例などのコードはes 6の文法を採用します。
リンク

公式中国語サイト

vueとvuexを使って実現した簡易商店街です。ご参考ください。

vuexは何ですか？
まずvuex公式サイトの話を引用します。
VuexはVue.jsアプリケーションのために開発された状態管理モードです。集中的なストレージ管理アプリケーションのすべてのコンポーネントの状態を採用し、対応する規則的な保証状態で予測可能な方法で変化する。
状態管理モード、集中中国式記憶管理は聞いただけで大きくなります。怖いです。私の考えでは、vuexは共有する変数をすべて一つのオブジェクトに格納し、そのオブジェクトをトップのコンポーネントに置いて他のコンポーネントに使用します。ということは、vueをjsファイル、コンポーネントを関数として扱いたいと考えていますが、vuexはグローバル変数です。この「グローバル変数」には特定のルールが含まれています。
vueのコンポーネント化開発では、現在のコンポーネントの状態を他のコンポーネントに伝える必要があることがよくある。父と子のコンポーネントが通信する時、私達は通常props+emitという方式を採用します。しかし、通信の双方が親子の部品ではなく、または一つの状態を複数の部品に共有する必要がある場合は、非常に面倒です。データの維持もかなり難しくなります。これは開発にとって友好的ではありません。vuexはこの時に実用的ですが、vuexを使ってからもっと多くの概念とフレームを持ってきました。慎重にしてください。
vuexにはどんな内容がありますか？
Talk is chap，Show me the code.コードの間隔の下にこんなに多い文字を来てください。

const store = new Vuex.Store({
  state: {
    name: 'weish',
    age: 22
  },
  getters: {
    personInfo(state) {
      return `My name is ${state.name}, I am ${state.age}`;
    }
  }
  mutations: {
    SET_AGE(state, age) {
      commit(age, age);
    }
  },
  actions: {
    nameAsyn({commit}) {
      setTimeout(() => {
        commit('SET_AGE', 18);
      }, 1000);
    }
  },
  modules: {
    a: modulesA
  }
}

これは最も基本的で完璧なvuexコードです。vuexは五つの基本的な対象を含みます。

state：格納状態。つまり変数です

getters：派生状態。つまりset、getの中のgetは、2つのオプションパラメータがあります。state、gettersは、それぞれstateの変数と他のgettersを取得することができます。外部呼び出し方式：store.getters.personInfo()vueのcomputedと同じです。

muttions：状態修正を提出します。つまりset、getのセットです。これはvuexの中で唯一stateを修正する方式ですが、非同期操作はサポートされていません。最初のパラメータはデフォルトではstateです。外部呼び出し方式：store.co mmit('SET_AGE'，18)vueの中のmethodsと似ています。

actions：muttionsと似ています。しかし、actionsは非同期動作をサポートします。最初のパラメータのデフォルトは、storeと同じパラメータ属性を持つオブジェクトです。外部呼び出し方式：store.dispatch('nameAsyn')

modules：storeのサブモジュールは、コンテンツがstoreの一例に相当する。前に紹介したのと同じように、現在のサブモジュール名を加えます。例えば、store.a.getters.xxx（）。

vue-cliではvuexを使う方式です。
一般的には、vue-cliを使って実際の開発を行いますが、vue-cliでは、開発と呼び出しの仕方がちょっと違っています。

├── index.html
├── main.js
├── components
└── store
  ├── index.js     #           store    
  ├── state.js     #      state
  ├── getters.js    #      getter
  ├── mutation-types.js #     mutations  （    mutions       ）
  ├── mutations.js   #      mutation
  ├── actions.js    #      action
  └── modules
    ├── m1.js     #   1
    └── m2.js     #   2

state.jsの例：

const state = {
  name: 'weish',
  age: 22
};

export default state;

getters.js例（私たちは一般的にgettersを使ってstateの状態を取得します。直接stateを使うのではありません。）

export const name = (state) => {
  return state.name;
}

export const age = (state) => {
  return state.age
}

export const other = (state) => {
  return `My name is ${state.name}, I am ${state.age}.`;
}

muttionn-type.jsの例（すべてのmuttionsの関数名をこのファイルに入れます）：

export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';

muttions.jsの例：

import * as types from './mutation-type.js';

export default {
  [types.SET_NAME](state, name) {
    state.name = name;
  },
  [types.SET_AGE](state, age) {
    state.age = age;
  }
};

actions.js例（非同期動作、複数のcomitの場合）：

import * as types from './mutation-type.js';

export default {
  nameAsyn({commit}, {age, name}) {
    commit(types.SET_NAME, name);
    commit(types.SET_AGE, age);
  }
};

modules-m 1.jsの例（複雑なアプリケーションでないと、一般的にはモジュールを区別しない）：

export default {
  state: {},
  getters: {},
  mutations: {},
  actions: {}
};

index.js例（組立vuex）：

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import m1 from './modules/m1.js';
import m2 from './modules/m2.js';
import createLogger from 'vuex/dist/logger'; //     

vue.use(vuex);

const debug = process.env.NODE_ENV !== 'production'; //       true，   false

export default new vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    m1,
    m2
  },
  plugins: debug ? [createLogger()] : [] //        vuex     
});

最後にstoreのインスタンスをmain.jsの中のvueにアップロードすればいいです。

import store from './store/index.js';

new Vue({
 el: '#app',
 store,
 render: h => h(App)
});

vueコンポーネントで使用する場合、私たちは通常、mapGetters、mapActions、mapMuttionsを使用して、vueによってmethodsとcomputedを呼び出すことができます。これらの変数または関数は以下の通りです。

import {mapGetters, mapMutations, mapActions} from 'vuex';

/*       script   */
export default {
  computed: {
    ...mapGetters([
      name,
      age
    ])
  },
  methods: {
    ...mapMutations({
      setName: 'SET_NAME',
      setAge: 'SET_AGE'
    }),
    ...mapActions([
      nameAsyn
    ])
  }
};

締め括りをつける
以上がvuexの関連している知識で、実はvuexはとても簡単で、何回を使ってもよく分かります。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。