A、Vuexプレゼンテーション（変異同期方法）
方法によって定義されたconstの状態変数は、新しいVuex.Storeの文言で参照です
1、main.js
// Sotre変数、すなわち、グローバル変数、すべてのコンポーネントの変数を共有 ヴューからインポート 'VUE'; // 参照VUE インポートVuex 'vuex'から; // vuex参照 Vue.use（Vuex）; // 使用vuex // 、フォーマット / * constの=ストア新新Vuex.Store（）; エクスポート・デフォルト・ストア; * / // /////////////////////////// ////////////////////////////////////////////////// ///// // 2、例示的 // 定義データ // vuexにおける状態データを格納するのに使用される CONST状態= { ：名 100 } // この方法は、変異の状態を変化させることであるので、定義された突然変異同期方法 / /当事者は、データ・ソース状態に変更するために主に使用される方法である変異 CONST変異= { addNumber（）{ state.name + = 100 }、 reduceNumber（）{ state.name + = 100 } } // 定義方法非同期アクションが使用される：非同期操作を、このようなデータ要求として、アクションに入れられる必要がある // インスタンス化Vuex.store、アクションに使用アクションの導入に使用するどのようなプライマー、使用ゲッターの導入にゲッターは、それがここにのみ使用されます2 CONST =ストア新新Vuex.Store（{ 状態、 変異 }） のエクスポートデフォルトストア; // ... 1、ページの状態で得られた値に、この$のSTORE.STATEを使用。 // 2ページが、このファイルを使用しています。$ Store.commit vuex変異でメソッドを呼び出すために //これを使用して3ページ。$ Store.dispatchアクションvuexでメソッドを呼び出す // アクションとの突然変異の違い // ではなく、直接の状態を変更するよりも、突然変異を提出するアクション
ページの呼び出し
<テンプレート>
の<div> {{ この。$ store.state.name}}
<クリック@ボタン= "追加">增加100 </ button>を
减少100 </ button>の<クリック= "減らす" @ボタン>
</ DIV>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
コンポーネント：{
}、
データ（）{
リターン{
活性： 2
}。
}、
メソッド：{
追加（）{
この。$のstore.commit（ 'addNumber' ）
}、
（）{ 減らす
この $のstore.commit（ 'reduceNumberを'。 ）
}
第二に、プレゼンテーション（動作例非同期呼び出し）
store.jsファイル
// Sotre変数は全ての構成要素、すなわち、グローバル変数の変数共有 ヴューからインポート 'VUEを'; // 参照VUE インポートVuex 'vuex'から; // vuex参照 Vue.use（Vuex）; // 使用しvuex CONSTストア = 新しい新しいVuex.Store（{ 状態：{ COUNT： 0 }、 変異：{ INCREMENT（状態）{ state.count ++ } }、 アクション：{ INCREMENT（コンテキスト）{ context.commit（ 'INCREMENT' ） } } } ） エクスポートデフォルトのストア // 1ページでこれ。$ STORE.STATEは、状態の値を取得します。 // 2ページが、このファイルを使用しています。$ Store.commit vuex変異でメソッドを呼び出す // 3ページがこれを使用する。$ Store.dispatch vuexアクションでメソッドを呼び出すために 、// アクションと変異の違い // アクションは、直接、状態を変更するのではなく、突然変異を提出します
ページの呼び出し
<テンプレート>
の<div> {{ この。$ store.state.count}}
<ボタンをクリック@ = "追加">增加100 </ボタン>
</ div>
</テンプレート>
<スクリプト>
輸出デフォルト{
コンポーネント：{
}、
データ（）{
リターン{
活性： 2
}。
}、
メソッド：{
追加（）{
この。$のstore.dispatch（ '増加' ）
}
}
}
</ SCRIPT>
第三に、プレゼンテーション（アクション非同期呼び出しの拡張の一例）
1、拡張コールバック引数
store.jsページ
// Sotre変数は全ての構成要素、すなわち、グローバル変数の変数共有 ヴューからインポート 'VUEを'; // 参照VUE インポートVuex 'vuex'から; // vuex参照 Vue.use（Vuex）; // 使用しvuex CONSTストア = 新しい新しいVuex.Store（{ 状態：{ COUNT： 0 }、 変異：{ INCREMENT（状態）{ state.count ++ } }、 アクション：{ INCREMENT（文脈、PARAM）{ context.commit（ 'INCREMENT' ） / / コールバック後のアクション IF （param.success）param.success（） } } }） エクスポートデフォルトのストア // これで。1、ページ。$ STORE.STATE状態で得られた値に設定します。 // 2ページが、このファイルを使用しています。$ Store.commit vuex変異でメソッドを呼び出す // 3ページがこれを使用する。$ Store.dispatch vuexアクションでメソッドを呼び出すために 、// アクションと変異の違い // アクションは、直接、状態を変更するのではなく、突然変異を提出します
ページの呼び出し
<テンプレート>
の<div> {{ この。$ store.state.count}}
<ボタンをクリック@ = "追加">增加100 </ボタン>
</ div>
</テンプレート>
<スクリプト>
輸出デフォルト{
コンポーネント：{
}、
データ（）{
リターン{
活性： 2
}。
}、
メソッド：{
（）を追加{
この。$ store.dispatch（ "増加" 、{
成功（）{
警告（ "！インクリメント" ）
}
}）
}、
}
}
<
重要なポイント
コールバック関数内の変数のペイロードを追加
2、に沿ってコールバックパラメータ拡張プロパティ+
ストアページ
// Sotre変数は全ての構成要素、すなわち、グローバル変数の変数共有 ヴューからインポート 'VUEを'; // 参照VUE インポートVuex 'vuex'から; // vuex参照 Vue.use（Vuex）; // 使用しvuex CONSTストア = 新しいVuex.Store（{ 状態：{ COUNT： 0 、 リスト：[] }、 変異：{ // それが店内//新しいであるため、ここではこの状態上の状態が対応する、PARAMパラメータが渡されますパラメータが必要とされる、 INCREMENT（状態、PARAM）{ state.count ++ ; state.list = PARAM; } }、 アクション：{ //ここストアと$コンテキスト我々はメソッドを使用し、同じオブジェクトを持って、paramがパラメータ変数（二つの属性を持つ）上を通過させる INCREMENT（文脈、のparam）{ context.commit（「INCREMENT」、param.list） / / アクション・コールバック後の IF （param.success）param.success（） } } }） のエクスポートデフォルトストア // 。1、これを使用してページ。$ STORE.STATE状態で得られた値に設定します。 // 2ページが、このファイルを使用しています。$ Store.commit vuex変異でメソッドを呼び出す // 3ページがこれを使用する。$ Store.dispatch vuexアクションでメソッドを呼び出すために 、// アクションと変異の違い // アクションは、直接、状態を変更するのではなく、突然変異を提出します
呼び出しページ
<テンプレート>
の<div>
{{ これ。store.state.count $}}
{{ これ。store.state.list}} $
<=ボタン@クリックして"追加">増加100 </ボタン>
</ div>
< /テンプレート>
<スクリプト>
エクスポートデフォルト{
コンポーネント：{
}、
データ（）{
リターン{
アクティブ： 2
};
}、
メソッド：{
追加（）{
この $ store.dispatch（ "INCREMENT"。、{
// 匿名の定義可変パラメータは、2つの属性、リスト変数、コールバック関数によって増加される
リスト：[{名：「白」}、{名：「高漸離」}、{名前：「ガニエ」'ガニエ' }]、
成功（）{
警告（ "インクリメント！" ）
}
}）
}、
}
}
</ SCRIPT>
レンダリング：
注：実際には、上記のすべてのパラメータ（一緒に使用する匿名の書き込みコールバック関数と共通の変数の定義内部パラメータ変数のみ文言）
図3に示すように、拡張非同期コールバック要求AJAX後