Vueの研究ノート：Vuex

なぜVuex

• 管理共有状態
• 複数のコンポーネント間でデータの困難を解決するためのトライアル
• 小さな状態を超える異なる体系的な状態管理、

基礎となるデザインパターン：

グローバル・シングルトン

シナリオ

• 大規模プロジェクトに適し。
• 小さなプロジェクトには、複雑さをもたらし、より概念やフレームワークを紹介しますので、

Vuex操作機構

デベロッパーツールモニタデバッグ用以下の図と同様の状態 - > vue->アクション・プロセスが、複数の突然変異、。変更計画は念頭に置いておく必要があります。その後の符号化における順序で能力。

Vueの中でVuexを使用する方法

準備

ビューはvue_demoを作成します
cd vue_demo
上記海面とvuex
NPM実行はサーブ

インポート開始

'vuex'からインポートVuex 
Vue.use（Vuex）

作成インスタンスストア

CONST店舗= 新しいVuex.Store（{
  状態：{
    カウント： 0
  }、
  変異：{
    インクリメント（状態）{
      state.count ++
    }
  }、
  アクション：{
    インクリメント（{コミット}）{
      setTimeout（（） => {
        （コミット「増分」）
      }、 3000 ）
    }
  }
}）

パッケージ

<テンプレート>
  <DIV ID = "アプリ">
  {{カウント}}
  </ div>
  <ボタン@click = "$ store.commit（ '増分'）"> </ button>をクリックしてください
  <ボタン@click = "$ store.dispatch（ '増分'）"> </ button>をクリックしてください
</テンプレート>

スクリプト

輸出のデフォルト{
  名前：「アプリ」、
  conputed：{
    カウント（）{
      リターン 0 ;
    }
  }
}

Vuex基本原則と中核となる概念

Vuex練習

 変異イベントタイプの代わりに、一定の練習Vuexを使用して

// 変異types.js
輸出のconst SOME_MUTATION = "SOME_MUTATION"


// store.jsは 
'vuex'からVuexをインポート
からimprot {SOME_MUTATION}」./mutation-types'


CONST店舗 = 新しいVuex.Store（{
  状態：{...}
  変異：{
    [SOME_MUTATION]（状態）{
    //mutate state
    }
  }
}

Module

• 开启名称空间 namespaced:true
• 嵌套模块不要过深，尽量扁平化
• 灵活应用 createNamespacedHelpers