Vuexは特別にVue.jsアプリケーションの状態管理のために開発されました

さて、ここで私たちは、行くあなたがこのことについて理解していない場合は、こちらをクリックしてくださいhttps://vuex.vuejs.org/zh/

インストール

NPM vuexをインストールする- 保存

ヤーン追加vuex

1、Srcは、以下の新しいフォルダストアを作成します

2、ストアに新しいフォルダを作成しindex.js

次のように内容は以下のとおりです。

3、index.js以下の

インポート'VUE'からVUE 
Vuexからインポート 'vuex' 
Vue.use（Vuex）
// オブジェクトVueX作成 
CONST =ストア新しい新しいVuex.Store（{ 
  状態：{ 
    名： 'クレヨンの妖精' 
  } 
  // ストアに計算されますプロパティ
  ゲッター：{ 
    のgetName（状態）{ 
      戻りstate.name 
    } 
  } 
  // 非同期操作
  アクション：{ 
    setMyName（コミット{、}状態、名前）{ 
      コミット（ 'のsetName' 、名前）
    } 
  } 
  // 同期動作
  / / 私は、状態値の状態を変更すると、唯一の方法変異をコミットすることによって変更することができます。
  変異：{
    setName（状態名）{
      state.name = 名
    } 
  } 
}）

輸出デフォルトのストア

4、改変store.jsのmain.jsを導入します

輸入Vueの「VUE」から
インポートアプリから「./App」
からインポートルータ「./router」
 // 引入vuexストア 
からのインポートストア『@ /店舗/インデックス』新しいヴュー（{ 
  エル：『#app』、
  店、
  ルータ、
  コンポーネント：{アプリケーション}、
  テンプレート： '<APP />' 
}）

これまではVUEXの導入を完了しました。

ここでは、例を説明するために開始し、我々は直接、次のようであるHelloWorld.vueコード以下のコンポーネントを変更します

<テンプレート> 
  の<divクラス= "こんにちは"> 
    {{のgetName}}
     <クリック= "のsetName" @ボタンタイプ= "ボタン">変更</ボタン>クリック
    <ルータ-リンク： 'ディレクトリのmystore'：=「{名前に}「>別のページ</ルータリンク>にジャンプします
  。</ div> 
</テンプレート> 

<スクリプト> 

エクスポートデフォルト{ 
  名： 'HelloWorldの' 、

  データ（）{ 
    リターン{} 
  }、
  メソッド：{ 
    のsetName（名）{ 
      // この。store.commitの$（ 'のsetName'、 '豚ページ'）
      この。store.dispatchの$（ 'setMyName'、 '豚ページ' ）
    } 
  }、
  計算：{ 
    のgetName（）は、{ 
      戻り 、これを。$ store.getters.getName 
    } 
  } 
}
 </ SCRIPT>

そして、次のコンポーネントは、新しいコンポーネントをmyStore.vue

<テンプレート> 
    の<divクラス= "ディレクトリのmystore"> 
      {{$ store.state.name}}
     </ DIV> 
</テンプレート> 

<スクリプト> 

輸出デフォルト{ 

}
 </ SCRIPT>

Srcとrouter.js下方に配置されました

'VUE'からインポートヴュー
インポートルータから 'VUEルータ' 

Vue.use（ルータ）

エクスポートデフォルト 新しいルータ（{ 
  ルート：[ 
    { 
      パス： '/' 、
      名前： 'のHelloWorld' 、
      成分：（） =>インポート（ '@ /コンポーネント/ HelloWorldの' ）
    }、
    { 
      パス： '/ディレクトリのmystore' 、
      名称： 'ディレクトリのmystore' 、
      成分：（） =>インポート（ '@ /コンポーネント/ディレクトリのmystore' ）
    } 
  ] 
}）

今、私たちは表情を開始します。

OKが期待に達しました。

要約：

この。$ Store.commit（）メソッドを使用してこの。$ Store.dispatch（）との差

コミット：同期
ストレージ

この。$のstore.commit（ 'changeValue'、名前）

値

この。$ store.state.changeValue

ディスパッチ：非同期操作

メモリ

この。$のstore.dispatch（ 'getLists'、名前）

値

この。$ store.getters.getLists

何か問題がある場合は、元の記事を戦うためにすべての手は、Paizhuanは私に以下のコメントを与えることを歓迎します。

Vuexは特別にVue.jsアプリケーションの状態管理のために開発されました

この。$ Store.commit（）メソッドを使用してこの。$ Store.dispatch（）との差

おすすめ