Vuexの用途は、詳細な

この記事はなりvuex、このような参照するには、さらなる研究の必要性など、詳細な説明を行うために使用Vuex公式サイトを

何Vuexこと？

公式の説明：Vuex特殊Vueアセンブリので集中ストレージ管理アプリケーション、および対応する状態ルールの状態が変化し予測可能な方法を確保することを使用するアプリケーション開発状態管理モデル。
Vuex伝統的な価値観の複合成分間の頻繁な、大規模なプロジェクトを行う、集中状態管理フレームワークであり、それは使用するのに非常に適しているVuex状態の管理を行います。あなたは、大規模な単一ページの参照をしない場合は、使用しVuexて冗長に表示されます。

Vuex作業フローチャート

Vuexデータは原則的に流れる一方向を満たすように設計された、回避は交通の混乱の状態リードの親コンポーネントサブアセンブリを修正します。図図から分かるようにview component- >でdispatch配信actions- >によってcommitトリガmutations方法- >変更するstate- >ビューを更新しview component、

注意：

Vuex状態に応答するには（state更新することができview、viewそれも変更することができますstate）
データフローは一方向であります
Vuex変更する唯一の方法stateのみmutations
中には、actions配布することができmutations、かつ非同期タスクすることができ

状態

Vuex単一状態のツリーを使用して、オブジェクトを使用するアプリケーションレベルの状態のすべてを含みます。この時点では、単一の状態源として存在します。また、これは、各アプリケーションが一つだけ含まれることを意味しstore、インスタンスを。
state含まれているstoreので、状態データを

const store = new Vuex.Store({
  state:{
  	 count:100,
	 list:[
	    {
	      id:1,
	      name:'name1'
	    },
	    {
	      id:1,
	      name:'name2'
	    }
  	]
  },
});

ゲッター

同様Vueの計算特性、state返されたクエリデータ処理

const getters = {
  countComputed(state){
    return state.count+'user'
  }
}

突然変異

変更の状態が送信される唯一の方法と同様に、唯一のタスクの同期をVuexstoremutationVuemethods

const mutations = {
// mutationTypes是mutation事件类似的常量表示
  [mutationTypes.INCREMENT](state,n=1){
    state.count += n
  }
}

アクション

Action同様にmutation、しかし、action提出されているmutation、直接の状態を変更するのではなくaction非同期操作を行うことができます

const actions = {
  incrementAction(ctx,{n}){
    ctx.commit(mutationTypes.INCREMENT, n)
  },
  demo(ctx){
    setTimeout(() => {
      // 提交mutation
    }, 1000);
  }
}

モジュール

単一の状態ツリーの使用のために、すべてのアプリケーションの状態は比較的大きなオブジェクトに集中されます。アプリケーションは非常に複雑になると、store非常に肥大化することが可能です。これらの問題を解決するためにVuex私たちができるようにするstoreモジュールに分割、各モジュールは独自のを持ってstate、mutation、action、getter、
維持管理するためのプロジェクトが容易になり、大規模プロジェクト、サブモジュールを、実施するだけでなく、チームワークの開発を容易
モジュールの形で本明細書中で使用されます総合的な例を行います

ディレクトリのファイル

ここに画像を挿入説明

Vuexエントリファイルindex.js

index.js各モジュールの導入、このファイルVuexのエントリファイル

import Vue from 'vue'
import Vuex from 'vuex'
import userStore from './user'
import productStore from './product'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    userStore,
    productStore
  }
})

user.jsのモジュール

モジュール1：ユーザモジュール。使用mutationTypes、一元管理を行い、エラーを低減するためのメソッドの名前。

import * as mutationTypes from './mutation-types'
const state = {
  count:100
}
const getters = {
  countComputed(state){
    return state.count+'user'
  }
}
const mutations = {
  [mutationTypes.INCREMENT](state,n=1){
    state.count += n
  }
}
const actions = {
  incrementAction(ctx,{n}){
    ctx.commit(mutationTypes.INCREMENT, n)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

product.jsモジュール

import * as mutationTypes from './mutation-types'
const state = {
  count:1
}
const getters = {
  countComputed(state){
    return state.count+'product'
  }
}
const mutations = {
  [mutationTypes.INCREMENT](state,n=1){
    state.count += n
  }
}
const actions = {
  incrementAction(ctx,{n}){
    ctx.commit(mutationTypes.INCREMENT,n)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

変異の種類

export const INCREMENT = 'increment'

App.vueアセンブリ入口

<template>
  <div>
      {{ userCount }}
      {{ productCount }}
      <!-- {{ userGetterCount }} -->
      <!-- {{ productGetterCount }} -->
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions,mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState({
      userCount: state => state.userStore.count,
      productCount: state => state.productStore.count
    }),
    ...mapGetters({
      userGetterCount: 'userStore/countComputed',
      productGetterCount: 'productStore/countComputed'
    })
  },
  methods: {
    ...mapActions({
      userIncrement: 'userStore/incrementAction',
      productIncrement: 'productStore/incrementAction'
    }),
    ...mapMutations({
      userIncrementMu: 'userStore/increment',
      productIncrementMu: 'productStore/increment'
    })
  },
  mounted() {
    // this.userIncrement({n:-10})
    // this.productIncrement({n:1000})
    this.userIncrementMu(-10)
    this.productIncrementMu(1000)
  }
}
</script>