状態は、主に、我々は毎日使用するコンポーネントとの間の可変伝達を格納するために、オブジェクトストアのすべてのアプリケーション状態レベルに格納されています。
我々はスクラッチVuexプロジェクトから起動する方法のように、次のいくつかの用途の状態を説明するに焦点を当て今日は、私が書いた最初の記事を参照してください。見るためにクリック
使用：この$ストアを使用します。
次のように我々はまだどのようにアキュムレータの例を見て、具体的なコードは次のとおりです。
state.jsファイル内のカウント変数を追加します
constの状態= {
数：0
}
輸出デフォルトの状態
次のようにsrcフォルダでは、新しい状態のフォルダを作成し、新しいindex.vueファイルを作成します。
<テンプレート>
の<divクラス= "状態">
<H2> {{カウント}} </ H2>
<ボタン@をクリック= "追加"> +追加</ボタン>
</ div>
</テンプレート>
の<script>
のエクスポートデフォルト{
計算：{
数（）{
//第一种用法
これを返す$ store.state.count。
}
}、
メソッド：{
追加（）{
//第一种用法
。この$のstore.state.count ++
}
}
}
</ SCRIPT>
Vueのルートインスタンスストアオプションで登録し、店のインスタンスが訪問するこの。$ Storeからルートコンポーネントおよびサブアセンブリの下のすべてのサブコンポーネントに注入されます。
二つの使い方：ファイル参照store.js
次のように具体的なコードは次のとおりです。
ファイルの内容の上記の例にstate.js参照し、以下のように、状態/ index.vueを変更します。
<テンプレート>
の<divクラス= "状態">
<H2> {{カウント}} </ H2>
<ボタン@をクリック= "追加"> +追加</ボタン>
</ div>
</テンプレート>
の<script>
インポート'@ /店舗/ store.js'から店舗
輸出デフォルト{
{：計算された
回数（）{
//第二种用法
store.state.countを返す
}
}、
メソッド：{
追加（）{
//第二种用法
店.state.count ++
}
}
}
</ SCRIPT>
この方法Vueのモジュール構造のシステム、状態における各成分の使用を必要とし、しばしばインポートする必要があります。
シンタックス3：使用mapStateヘルパー
次のように具体的なコードは次のとおりです。
ファイルの内容の上記の例にstate.js参照し、以下のように、状態/ index.vueを変更します。
<テンプレート>
の<divクラス= "状態">
<H2> {{カウント}} </ H2>
</ div>
</テンプレート>
<スクリプト>
'@ /店舗/ store.js'から//インポートショップ
インポート{ 'vuex'からmapState}
{エクスポートデフォルト
：（mapState {計算
：カウント状態=> state.count
）}
}
</ SCRIPT>
若しくは
<テンプレート>
の<divクラス= "状態">
<H2> {{カウント}} </ H2>
</ div>
</テンプレート>
<スクリプト>
'@ /店舗/ store.js'から//インポートショップ
インポート{ 'vuex'からmapState}
輸出デフォルト{
計算：{
... mapState（[ '数']）
}
}
</ SCRIPT>
これらの状態は、プロパティを計算するために宣言されたときにコンポーネントが複数の状態を取得する必要がある場合、いくつかの重複や冗長になります。この問題を解決するために、我々はmapStateヘルパーを使用することができ、私たちは、計算プロパティの生成を助けます