vuexの高度なVueJS

まず、vuexは何ですか

vuexは特別にvue.jsアプリケーションの状態管理のために開発されています。

我々は、データのプロパティとして理解することができ、この状態では、我々は、他の構成要素の一部を共有する必要があります。Vueのは、グローバル変数、集中管理を統一使用vuexとして理解することができます。

 プロジェクトvuexで参照

NPMインストールvuex --save

二つの、5つの基本的なオブジェクトのvuex：

• 状態：保存状態（変数）
• ゲッター：再コンパイル前のデータ取得に、状態プロパティの計算として理解することができます。私たちは（コンポーネントでの$ sotre.getters.funを使用します）
• 変異：修正された状態、および同期しています。アセンブリに（ ''、のparamsを）$ store.commitを使用してください。類似した私達のカスタムイベントのこのコンポーネント。
• アクション：非同期操作。組み立ての$ store.dispathで使用されています（「」）
• モジュール：記憶サブモジュール、状態の管理と使用を容易にするために大規模なプロジェクトを開発するためです。我々はここで説明し、上記のように彼らと同じではないでしょう。

ここでは、実際のコード、ショー以下のディレクトリ構造、実際のプロジェクトからこれらの5つの基本的なオブジェクトの使用を見てください。

プロジェクトは、我々が使用して開始vuex（セクションIコード言及をインストール）がインストールされている場合、我々はvuexを参照してください。

import Vue from 'vue' // 引用 vue

'vuex' //引用vuexから輸入Vuex

プロジェクトへの参照//「./modules/app」からインポートするアプリ

「./modules/user」//ログインユーザグローバルデータからインポートユーザー

//グローバルデータベース「./modules/initData」からインポートinitData

'./modules/pageInfo' //分页から輸入pageInfo

「./getters' //引用ゲッターからの輸入ゲッター

Vue.use（Vuex）

記憶サブモジュールにコードアプリケーション、ユーザ、initdData、pageInfo上記;店舗ストアサブモジュールを初期化するとき、次の通り：

新しい新しいVuex.Storeを保存=一定（{ 
  //サブモジュール組み込む
  モジュール：{ 
    アプリケーション、ユーザー、initData、PageInfo 
  }、
  ゲッター
}）

エクスポートデフォルトのストア

その後、外観はサブモジュールのモジュラー構造に噴火し、当社のユーザーのサブモジュールは、例えば、次のコードで簡単なコードの構造を示しています。

'@ / utilsの/ツール/認証'から//インポート{入手トークン、setToken、removeToken} 
constのユーザー= { 
  状態：{ 
    トークン： ''は、
    ユーザ名： ''、
    ユーザID： ''、
　　 カウント：0 
  }、
  変異：{ 
    SET_TOKEN：（状態、トークン）=> { 
      state.token =トークン
    }、
    SET_USERNAME：（状態、名前）=> { 
      state.username =名
    }、
    SET_ID：（状態、USERID）=> { 
      state.userId USERID = 
    } 、
　   AddCount（状態、N = 0）{ 
      リターン（state.count + = N）
    }、
    ReduceCount（状態、N = 0）{ 
      リターン（state.count - = N）
    } 
  }、
  アクション：{ 
    //登录
    ログイン（{}コミット、のUserInfo）{ 
      constのユーザ名= userInfo.username.trim（）
      新しい約束を返す（（解決、拒否）=> { 
        global.api.getLogin（{ユーザー名：ユーザー名、PWD： userInfo.pwd、コード：userInfo.code}）を（応答=> {。
          CONSTデータ= response.data 
          、（data.token 'をSET_TOKEN'をコミット）
          コミット（ 'SET_USERNAME'を、data.username） 
          （'SET_ID'をコミットdata.id）
          localStorage.setItem（ 'TOKEN'、data.token）
          解決（応答）
        }）。キャッチ（エラー=> { 
          拒否（エラー）
        }）
      }）
    }、 
    //获取用户信息
    GetInfoは（{コミット状態}）{
      戻り新しいプロミス（（決意、リジェクト）=> { 
        global.api.getLoginInfo（）。次に、（応答=> { 
          CONSTデータ= response.data 
          コミット（ 'SET_TOKEN'、data.token） 
          （'SET_USERNAME'をコミット、データ。ユーザ名）
          （ 'SET_ID'、data.id）コミット
          解決（応答）
        }）。キャッチ（エラー=> { 
          にconsole.log（ 'エラー'）を
          拒否（エラー）
        }）
      }）
    } 
    //登出
    ログアウト（{コミット状態は}）{ 
          のlocalStorageを。クリア（）//キャッシュデータ空にする
          sessionStorage.clearを（）//キャッシュデータを空にする 
      新たな約束を（（解決、リジェクト）=> {戻り
        global.api.getLogout（）。次に、（応答=> { 
          「（コミットSET_TOKEN」、 ''）
          コミット（ 'SET_USERNAME'、 ''） 
          （' '' SET_ID）をコミット' 
          解決（）
        }）。キャッチ（エラー=> { 
          にconsole.log（ 'ERR'、誤差）
          （エラー）を拒否
        }）
      }）
    }、
    actionsAddCount（コンテキスト、N = 0）{ 
        にconsole.log（コンテキスト）
        リターンcontext.commit（ 'mutationsAddCount'、N）
    }、
    actionsReduceCountは（{コミット}、N = 0）{ 
        リターン（ 'mutationsReduceCount'、n）をコミット
    } 
  } 
} 

輸出デフォルトのユーザー

 

簡単には、上記のコードから参照するために、我々は、状態変数記憶状態変数の値は、メソッドの内部での変異によって改変されている使用します。メソッド呼び出しの様々な構成要素、アクションメソッドのアクションは、データベースのデータを照会するデータインタフェースを呼び出し、そして突然変異を用いて状態変数を修正することができます。

ここでは、アセンブリに使用することができた状態または変異の。

//组件中使用状態
 < テンプレート> 
  < DIV クラス= "こんにちは" > 
    < H3 > {{$ store.user.id}} </ H3 > 
  </ DIV > 
</ テンプレート>

コンポーネントが使用変異を

< テンプレート> 
  < DIV クラス= "こんにちは" > 
    < H3 > {{$ store.user.count}} </ H3 > 
    < DIV > 
      < ボタン@click = "handleAddClick（10）" >增加</ ボタン> 
      < ボタン@click = "handleReduceClick（10）" >减少</ ボタン> 
    </ DIV > 
  </ DIV > 
</ テンプレート> 


方法：{ { 
    handleAddClick（N）{
      この。$ store.commit（ 'AddCount'、n）は、
    }、
    handleReduceClick（N）{ 
      この$ store.commit（ 'ReduceCount'、N）。
    } 
}

で使用されるコンポーネントのアクション、使用dispath方法でトリガーアクションに

< DIV >异步操作</ DIV > 
< DIV > 
   < ボタン@click = "handleActionsAdd（10）" >异步增加</ ボタン> 
   < ボタン@click = "handleActionsReduce（10）" >异步减少</ ボタン> 
</ DIV > 
handleActionsAdd（N）{ 
     この。$ store.dispatch（ 'actionsAddCount'、N）
}、
handleActionsReduce（N）{ 
     この。$ store.dispatch（ 'actionsReduceCount'、N）
}

次に、我々はそれを次のようにコードがあり、計算されたプロパティの状態とみなされているため、一般的に、私たちの状態を取得するためにゲッターを使用し、ゲッターを見て

CONSTゲッター= { 
  トークン：状態 => state.user.token、
  名前：状態 => state.user.username、
  にuserId：状態 => state.user.id、
  getterCount：状態 => {state.count + = 10 } 
} 
輸出デフォルトのゲッター

ゲッターによって国有財産の使用

< H3 > {{$ store.getters.getterCount}} </ H3 >

あなたが理解できるかどうかここで、vuexアップを使用するには、何もあまりにも多くの圧力があります。

三、mapState、mapMutations、mapActions、mapGetters使用

vuex関係者は、私たちに利用vuexへの簡単な方法を与えたことがある、{mapState、mapMutations、mapActions、mapGetters}

< スクリプト> 
からインポート{mapState、mapMutations、mapActions、mapGetters} ' vuex ' 
輸出のデフォルト{ 
  名：' HelloWorldの' 、
  データ（）{ 
    リターン{ 
      MSG：' あなたのVue.jsアプリケーションへようこそ' 
    } 
  }、
  メソッド：{ 
    。 ..mapMutations（{ 
      handleAddClick：' mutationsAddCount ' 、
      handleReduceClick：' mutationsReduceCount ' 
    }）、
    ... mapActions（{ 
      handleActionsAdd。' actionsAddCount ' 、
      handleActionsReduce：' actionsReduceCount ' 
    }）
    // handleAddClick（N）{ 
    //    この$ store.commit（ 'mutationsAddCount'、N）。
    // } 
    // handleReduceClick（N）{ 
    //    この$ store.commit（ 'mutationsReduceCount'、N）。
    // } 
    // handleActionsAdd（N）{ 
    //    この。$ store.dispatch（ 'actionsAddCount'、N）
    // } 
    // handleActionsReduce（N）{ 
    //    この。$ store.dispatch（ 'actionsReduceCount'をN）
    // } 
  }、  
  計算：{
    （カウント）{
      返す これを。$ store.getters.getterCount 
    } 
  } 
} 
</ スクリプト>

 

 

 

最後のステップは、main.js私たちはさまざまなコンポーネントで定義されたグローバル変数を使用することができます導入後、登録vuex、店舗の紹介。

インポート「VUE」からVueの
アプリからのインポート「./App」 
Storeからのインポート「./store」// グローバル変数 
ルータ「./router」からのインポート// ルーティング 
プラグイン./components'からのインポートを// アセンブリの 
インポート" @ / iconsThe「// アイコン//コンポーネントSVG 
インポート」@ /許可" // パーミッションコントロール 
・モーメント「からインポート一瞬 
からインポートmyutils ./utils」// ヘルプファイル 
VUE-ルータからのインポートVueRouter『』// 参照ルーティングコンポーネント


Vue.use（ElementUI、zhLocale {}）// 利用UI要素 
ヴュー。  使用（プラグイン） // 基準成分
Vue.use（VueRouter）

Vue.prototype.api = myUtils.api.Api 
global.api = myUtils.api.Api 
global.Notification = ElementUI.Notification 
Vue.prototype.upload = myUtils.api.Upload 
Vue.prototype。$時間 = 時間
Vue.config.productionTip = 偽
Vue.prototype.printData = myUtils.api.printData 

新しいビュー（{ 
  EL： '#app' 、
  経路、
  店舗、
  レンダリング：H => H（APP）
}）