モジュール/ user.jsのコード
`` `
「表示」からインポートビュー
「vuex」からインポートVuex
Vue.use（Vuex）
CONST状態= {
劉：「jingna」
魏：[ '湯'、 '寧']
}
CONST突然変異= {
changeName（状態、RES）{
state.liu = RES
}
}
CONSTアクション= {
changeNameA（コンテキスト）{
context.commit（ 'changeName'、 '南京'）
}
}
輸出のデフォルト{
状態、変異、アクション
}
`` `
コードindex.js
`` `
`` `
「表示」からインポートビュー
「vuex」からインポートVuex
「./module/user」からのインポートユーザー
Vue.use（Vuex）
輸出デフォルト新しいVuex.Store（{
モジュール：{
ユーザー、
}、
状態：{
カウント：7777
}、
変異：{
変化（状態値）{
// eslintディセーブル - 次のライン無コンソールません
console.log（値）
//はeslintディセーブル - 次の行ノーはundefを
state.count =値
}、
}、
行動： {
changevalue（コンテキスト、paramsは）{
context.commit（ "変更"、params.count）
}
}
}）
使用VUEコンポーネント
``
`<テンプレート>
<DIV CLASS = "について">
<P> {{カウント}} </ P>
<P> {{ユーザー名}} </ P>
<ボタン@をクリック= "追加">点击</ボタン>
<ボタン@クリック= "namec">改名字</ボタン>
<headertop> </ headertop>
</ div>
</テンプレート>
<スクリプト>
「@ /コンポーネント/ヘッダ」からインポートheadertop。
"vuex" からインポート{mapActions、mapState}。
輸出のデフォルト{
名前：「約」は、
データ（）{
} {返します。
}、
計算：{
カウント： {
取得する（） {
。この$のstore.state.countを返します。
}
}、
ユーザ名：{
取得する（） {
これを返す$ store.state.user.liu。
}
}
}、
成分：{
headertop
}、
方法：{
{追加（）
。この$のstore.dispatch（ "changevalue"、{カウント：25}）;
}、
namec（）{
。この$のstore.commit（ "changeName"、 "深圳"）。
}
}
}。
</ SCRIPT>
`` `
ます。https：//www.jianshu.com/p/5903765d3bb3で再現