Vuexは、Vue.jsアプリケーション用に特別に開発された状態管理モードです。
ストア：データセンター
モジュール：データモデル
インデックス：インスタンス化
ディレクトリ構造
グローバルVuex
使用規則
ページデータ（さまざまなクエリパラメーター、apiによって取得された結果配列）が抽象化され、状態になります。
Vueページが初期化され、アクティブなディスパッチがAPIデータを要求するアクションをトリガーします。
ActionsがAPIデータを取得したら、同期コミットを使用してミューテーションをトリガーし、状態を更新します。
Vueページは、計算されたプロパティを使用して、状態のデータをバインドし、ビューを同期的に更新します。
Vueページのパラメーターが変更されました。同期コミットを使用してミューテーションをトリガーし、状態を更新します。ディスパッチを使用してアクションをトリガーし、APIデータを再度要求します。
関連する単語学習
Vue =》ディスパッチ=》アクション
アクション=》コミット=》ミューテーション（変更）
突然変異=》突然変異=》状態
状態=》レンダリング=》 Vue
Vue =》 commit =》ミューテーション（変更）
関連する文法学習
破壊的な割り当て
構造を分析してから、自動的に値を割り当てて、プログラマーのコード記述を簡素化します。
let obj = {username： 'java1234'、age：31};
/ * let username = obj.username; let age = obj.age; * /
{username、age} = obj;とします。
console.info（username、age）;
アプリケーション例1：ユーザー注文クエリ
store =》 index.js
'vuex'からVuexをインポートします。
'vue'からVueをインポートします;
'./modules/orderList'からorderListをインポートします。
Vue.use（Vuex）;
デフォルトの新しいVuex.Store（{ modules：{ orderList } }）をエクスポートします
store => modules => orderList.js
'vue'からVueをインポートします;
const state = { orderList：[]、 params：{} }
//ページは、ストアの gettersメソッド
const getters = { getOrderList：state => state.orderList }を呼び出して状態を使用します
// actions异しかしconstactions
= { fetchOrderList（{commit、state}）{ Vue.http.post（ '/ api / getOrderList'、state.params） .then（（res）=> { // actions中使用commit调用ミュー テーションcommit（ 'updateOrderList'、res.data.list） }、（err）=> { console.log（err） }） } }
//ミュー
テーションの同期// vuexはミューテーションが状態を変更することのみを許可しますconstmutations
= { updateOrderList（state、payload）{ state.orderList = payload }、 //ページパラメータの変更は同期アクションです。 updateParams（state、{key、val}）{ state.params [key] = val } }
デフォルトのエクスポート{ 状態、 ゲッター、 アクション、 ミューテーション}
vue => main.js
'./store'からストアをインポートします。
new Vue（{ el： "＃app"、 router、 store、 template： '<layout>'、 components：{layout} }）
vue =>ビュー=> orderList.vue
<テンプレート>
</ template>
<script>
export default { data（）{ return { } }、 calculated ：{ // tableDataリストレンダリングデータ tableData（）{ returnthis。$ store.getters.getOrderList } }、 methods：{ // productChangeproductドロップダウン選択ボックス productChange（obj）{ //ページパラメータが変更され、ストア内のミューテーションがcommitによってトリガーされ、ミューテーション が状態のパラメータを同期的に更新します。 this。$ store.commit（ 'updateParams'、{ key： 'productId'、 val：obj.value }）
//非同期ディスパッチ
this。$ store.dispatch（ 'fetchOrderList'）
}
}、
mounted（）{ //ページがレンダリングされると、ストア内のアクションがディスパッチによってトリガーされ、アクションが非同期的に呼び出されてデータが取得されます。 this。$ store.dispatch（ 'fetchOrderList'） } } </ script>
<スタイル>
</スタイル>
アプリケーション例2：ログイン
ログインページ
handleLogin（）{ this。$ refs.loginForm.validate（valid => { if（valid）{ this.loading = truethis 。$ store.dispatch（ 'user / login'、this.loginForm） .then（（）= > { this。$ router.push（{path：this.redirect || ' /'、query：this.otherQuery}）this.loading = false }）。 catch（（）=> { this.loading = false }） } else { console.log（ 'error submit !!'） return false } }） }
データセンターストア=>モジュール=> user.js
import {login、logout、getInfo} from '@ / api / user'
constアクション= { //ユーザーログイン login（{commit}、userInfo）{ const {ユーザー名、パスワード} = userInfo return new Promise（（resolve、reject）=> { login（{username：username.trim（）、password： password}）。then（response => { const {data} = response commit（ 'SET_TOKEN'、data.token） setToken（data.token） resolve（） }）。catch（error => { reject（error） }） }） }、
}
デフォルトのエクスポート{ 名前空間：true、 状態、 ミューテーション、 アクション}
ログインインターフェースAPI /ユーザー
'@ / utils / request'からのインポートリクエスト
export function login（data）{ return request（{ url： '/ vue-element-admin / user / login'、 method： 'post'、 data }）}
総括する：
1. Vueページが初期化されます。Mountedはアクティブにディスパッチを使用してストア内のアクションをトリガーし、アクションは非同期でAPIを呼び出してデータを取得します。
2. commitを使用して、アクションのミューテーションを呼び出します。
3.突然変異は、状態を同期的に変更します。
4. Vueページビューのデータバインディング計算プロパティ、gettersメソッドを介してストア内の状態データを取得し、ページをレンダリングします。
5. Vueページのパラメーターが変更され、ストア内のミューテーションがcommitによってトリガーされ、ミューテーションが状態のパラメーターを同期的に更新します。このページはディスパッチを使用してストア内のアクションを再度トリガーし、新しいApiデータを取得します。