序文

ない大規模プロジェクトと接触して、vuexを使用していない、複数のサブページを必要としない場合、その後、最初の前になることは全く許容可能です。

真実を言うと、vuexするために理解することは困難であるとき、私はvuex文書を読んでいた、でも私はそれを使用することができるとは思いません。しかし、私はこれらの項目では、次の質問を受けるまで：

過去の面倒を超える持っていた大量のデータ転送をルーティング、スイッチング、ルーティングするとき。
データの一部は複数のルートを使用する必要があり、その後、私は、複数のバックエンドからデータを取得する必要があります

もちろん、これらの問題は、オブジェクトがVUEをインスタンス化されるとき、あること、解決することができ、これらのデータは、上記のウィンドウオブジェクトにバインドされます。しかし、我々はまた、想像する必要があります：

場合にはデータがあまりにも多く、読みやすさではないので、それは落ちます
個々のデータを修正する場合にのみ、すべてのページが更新できていません

最初の質問のために、私たちは今も、モジュラー可読性のアイデアがさらに良くするために使用することができますが、その答えは、イエスですが、プロジェクトの仕様だけで起動しない、常に理解することは困難です。

ページの少ない2番目の質問については、このような問題ではなく、より多くのページならば、あなたは窓を入れたときにいることがわかります。更新されたデータ内の$データ、すべてのページ算出したプロパティがあること、あなたがデータを変更する方法に関係なく、ページがデータを更新しません、失敗します。

今回は、私たちはvuexを使用する必要があります。

はじめにvuex

だから、最後には何vuexですか？

引数の公式ウェブサイトを引用することはVuexは、状態管理のアプリケーション開発用に設計されたVue.jsです。これは、変更され予測可能な方法を確保するために、ストレージ管理アプリケーション、および対応する状態規則を集中すべてのコンポーネントの状態を使用します。

まだ理解することは少し難しいです実際には、単にこのプロジェクトは、一箇所ですべてのデータが保存されて置くために簡単にデータを変更して検索することであるvuex。

たとえば、このチャートから私たちはあなたを与えるの下に最初の簡単な分析

この写真では、我々は明らかに三つの部分を見ることができます

Vueのコンポーネントは、内部のコンポーネントを表しVUE
バックエンドAPIのAPIの背景
vuex内部のデータ管理コンポーネント

私たちは、貨物の中に、Vuexが倉庫であれば、何が表示されるまで、倉庫内のものに責任を、売上にVueのコンポーネントである、人々のバックエンドAPIと同等の鮮やかなを理解することができ、購入品を担当するも、（来ますこれはvuex内部に格納されたフロントエンドデータ）に戻るようにバックグラウンドです。vuexが倉庫で、倉庫は、商品状態は、着信および発信貨物Muationsが管理されています

参考vuex

状態が言う前に、私たちは私たちのプロジェクト参照vuexのVUEに開始することができます

npm install vuex

そして、私たちのsrcディレクトリに格納index.jsフォルダの内部に新しいファイルを作成し、保存フォルダを作成

// ~/src/store/index.js
import Vue from 'Vue'
import Vuex from 'Vuex'

// 在这里声明实例一个Vue 去引用Vuex状态管理插件
// 这样就可以减少在main.js里面的代码量了
Vue.use(Vuex)

// 返回store实例对象
export default new Vuex.Store({
})

ここではそれについて話をする、これは実際に倉庫のかなりvuexストアインスタンス化したものです。

代替データの状態

なぜ状態データ、それに代わるものはありますか？

それは理解しやすい、使用できるグローバルパラメータの状態に、内部のコンポーネントのローカルパラメータを話すことで、例えば、我々はデータがme.vueコンポーネントでTODO引用しました。

その後、我々は店の内部にそれをインスタンス化することができます

// ~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  }
})

だから、どのように我々は、コンポーネント内でこのデータを使用していますか？

// me.vue组件文件

// ...
<script type="text/ecmascript-6">
export default {
  data() {
    meTodo: [] // 然后在方法里面引用this.meTodo = this.$store.state.todo
  }
}
</script>
// ...

一度取得する必要があり、これらVUEも良いチームをしたい、我々はプロパティを計算することにより、データ内の状態を取得することができますそれは非常に簡単ではありませんが、我々は常にこの値を使用することはできません。

// ...
<script type="text/ecmascript-6">
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  computed: mapState([
  // 映射 this.todo 为 store.state.todo
  'todo'
])
}
</script>
// ...

等価に

// ...
<script type="text/ecmascript-6">
export default {
  computed: 
  todo () {
    return this.$store.state.todo
  }
])
}
</script>
// ...

計算されたプロパティのゲッター

時々、例えば、我々に計算されている場合、我々はより簡単にするために、フィルタ機能を使用する必要がTODOで10以上のみ数の大きい、vuexも計算の特性を提供してくれ、フィルタリング操作のいくつかのデータ状態を必要としますゲッター。

私たちは、〜/ srcに/店舗/インデックスファイルを変更することができます

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  }
})

そして、me.vue内部リファレンス

// ...
<script type="text/ecmascript-6">
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  }
}
</script>
// ...

これは、データを取得TODOシンプルが10以上であることができます

修正の変異状態

我々は、データを取得する方法を言うが、どのように我々は、それが直接可能なデータに割り当てられていないデータを変更する必要がありますか？

答えは、もちろん、vuex規制は、私たちは私たちがデータを変更しないか、そして、突然変異データによって変更することができませんか？
私たちの〜/ srcに/店舗/ index.jsを変更

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  }
})

そして、私たちのme.vue内部の部品を変更

// ...
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'
// 在单独构建的版本中辅助函数为 Vuex.mapMutations
import { mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  },
  method: {
    ...mapMutations(
      [
        // 将 `this.revsiseTode()` 映射为 `this.$store.commit('revsiseTode')`
        // 如果想传递参数可以使用this.$store.commit('revsiseTode', oneTode)
        // 或者Action
        'revsiseTode' 
      ]
    )
  }
}

使用のアクション

実際には、とにかく、アクション属性は、主に、ここでは、私はTODOデータは、ルーティングに取得することができたとした背景と使用と対話するために、そして最終的にアクションの出現にあまりにも長い間書き込み/私は/内部gettodo、したがって、修正〜/店舗/ index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  },
  actions: {
    getTodo: context => Vue.http.get('/me/gettodo', (res) => {
      context.commit('revsiseTode', res.body.todo)
    })
  }
})

そして、あなたはme.vueを変更し、データの状態を変更するために私たちの行動によってトリガ変異を提出することができます

// ...
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'
// 在单独构建的版本中辅助函数为 Vuex.mapMutations
import { mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  },
  method: {
    ...mapActions(
      [
        'reviseTodo', // 将 `this.reviseTodo()` 映射为 `this.$store.dispatch('reviseTodo')
      ]
    )
  }
}
// ...

vuexディレクトリ構造

単にvuexの使用について話しましたメインの上に、それは話の一部でしかありませんが、私はここに読んだ後、より良い理解を持つことになり、公式サイトにアクセスしてくださいと信じています。あなたがプロジェクトに適用vuexしたい場合はもちろん、これらは、使用が簡単であり、彼らはより魅力モジュラーでなければならない、vuex公式ウェブサイトでは、と私たちを提供し、標準的なプロジェクトのディレクトリ構造ではない、いくつかの長ったらしい私に、。

概要

vuexは難しいことではありません、私はまた、我々は使用が見つかりますように長い、実際には、また、良好なパッケージを持っているとして始まりは、学ぶことが非常に困難であったことを考えたが、他の人は、私たちは、この単純な使用へのアプローチ倉庫を行に。

Vueの学習日記（4） - Vueの状態管理vuex

序文