vuex状態管理VUEX状態管理

VUEX状態管理

VUEXはVUEが提供する状態の管理ツールである、彼が行うことができ、具体的何、例えば、ビジネス・シナリオがあります：

ユーザーがサインインすると、あなたは彼のログイン情報を設定することができます。ユーザーは、ユーザーのログイン情報を表示することができ、ホーム・ページにアクセスしてください。

実際には、異なる構成要素間で情報を共有するために使用されます。

私たちは、使用 VUE-要素管理者を VUEXの使用を説明するために、例えば、。

// 店/ index.jsは

からのVueをインポートする「VUE」
からインポートVuex「vuex」
からの輸入ゲッター「./getters' 
からの輸入アプリ」./modules/app「
インポート設定から」./modules/settings' 
輸入ユーザから './modules/user' 

Vue.use（Vuex）


CONSTストア = 新しいVuex.Store（{ 
  モジュール：{ 
    アプリケーション、
    設定、
    ユーザ
  }、
  ゲッター、
  プラグイン：[ 
     
] 
}）

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

ビルド店舗、店舗・サポート・モジュールは、この店では三つのモジュールがあります。

アプリモジュールの定義

// モジュール/ app.js 

からインポートクッキーを 'JS-クッキー' 

CONST状態 = { 
  サイドバーは：{ 
    開か：Cookies.get（ 'sidebarStatus'）？!! + Cookies.get（ 'sidebarStatus'）：真、
    withoutAnimation：偽
  }、
  装置： 'デスクトップ' 
} 

CONST変異 = { 
  TOGGLE_SIDEBAR：状態 => { 
    state.sidebar.opened =！state.sidebar.opened 
    state.sidebar.withoutAnimation = falseの
    場合（state.sidebar.opened）{ 
      Cookies.setは（'sidebarStatus'、1 ）
    } 他{ 
      Cookies.set（ 'sidebarStatus'、0 ）
    } 
  }、
  CLOSE_SIDEBAR：（状態、withoutAnimation） => { 
    Cookies.set（ 'sidebarStatus'、0 ）
    state.sidebar.opened = 偽の
    状態.sidebar.withoutAnimation = withoutAnimation 
  }、
  TOGGLE_DEVICE：（状態、デバイス） => { 
    state.device = デバイス
  } 
} 

CONSTアクション = { 
  toggleSideBarは（{}コミット）{ 
    （コミット'TOGGLE_SIDEBAR' ）
  }、
  closeSideBar（{}コミット、{withoutAnimation}）{ 
    （コミット 'CLOSE_SIDEBAR' 、withoutAnimation）を
  }、
  toggleDevice（{}コミット、デバイス）{ 
    （コミット 'TOGGLE_DEVICE' 、デバイス）
  } 
} 

エクスポートデフォルト{ 
  名前空間：真、
  状態、
  変異、
  アクション
}

アクション：外部コールのために提供します。

状態：状態が定義されているアプリ

名前空間：名前空間のサポート

toggleSideBar（）{
       この。$のstore.dispatch（ 'APP / toggleSideBar' ）
    }

この貫通することができます。$ Store.dispatchトリガー・アクションメソッド。