[Vue.js] 5 ) Vuex

Vuexとは?
Vuexは、データとそのステータスを同時に管理する拡張ライブラリです.コンポーネント構造の複雑化とアプリケーション規模の拡大に伴い、データの管理がますます困難になっています.Vuexを使用すると、すべての構成部品で1つのデータを参照できるため、一貫性を保つことができます.
Vuex導入のメリット

複数のコンポーネント共有データ

データ状態汎用処理

大状態管理図モジュールで簡単に

を取り外す.
Vuexに基づいて管理されるデータもアクティブなデータであるため、構成部品の構造状態にかかわらず、使用中に同期されます.
ステータス管理専用ライブラリであり、データの格納に加えて、アプリケーション・レベルでデータを監視したり、ステータス・グループを管理したりするモジュール機能など、ステータス管理に関連する多くの機能を備えています.
$onと$emitのイベントバスを使用してコンポーネント間でローカル状態交換を行い、Vuexはコンポーネント間でデータを交換するのではなく、アプリケーション全体の状態をオブジェクトとして管理します.
Vuexの機能
構成部品でステータスを変更するには、アクションと音楽が必要です.
国
ステータスはショップが管理している状態を表し、データと言える.舞台は音楽以外では変更できません.

const store = new Vuex.Store({
   state: {
      message:'메세지'
   }
})

// 호출하는 방법
store.state.message

来賓
「getter」(getter)は、状態を抽出する計算データであり、計算とメソッドの中間機能を有する.計算プロパティとは異なり、パラメータは受け入れられますが、セットアップ機能はありません.メソッドパラメータとして使用できるプロパティまたはメソッドを渡すことができます.

const store = new Vuex.Store({
    //...
    getters:{
      //단순하게 상태 리턴하기
      count(state,getters,rootState,rootGetter){
         return state.count
      },
      // 리스트 요소들의 price 속성을 기반으로 최댓값을 찾아 리턴하기
      max(state){
        return state.list.reduce((a,b) => {
          return a > b.price ? a: b.price
          },0)
      }
   }
})

音楽
これは国を変える方法だ.構成部品の方法と同じです.パラメータとしてstate,payload(コミットで渡されるパラメータ)情報を受信する.

const store = new Vuex.Store({
  //...
  mutations:{
     mutationType(state,payload) {
        state.count = payload
     }
  }
})

大規模開発ではメソッド名にも定数を用いる.このとき、音楽や動作の仕方を「タイプ」と呼ぶ.このメソッドは直接呼び出されるのではなく、コミットというメソッドを使用して呼び出されます.タイプとハンドルコンセプトを使用して呼び出します.
送信
コミットは、登録された音楽を呼び出すことができるインスタンスメソッドです.コンポーネントに似た$emit.任意のパラメータでも動作内部でも使用できます.
アクション
動作は非同期処理を含むことができる方法である.データ加工や非同期処理を行った後、結果を音楽に提出します.

const store = new Vuex.Store({
  //...
  actions:{
     actionType({ commit },payload) {
         // 액션 내부에서 커밋하기
         commit('mutationType')
     }
  }
})

さまざまな機能を使用するために、コンテンツの表示やステータスの変更などの詳細な処理は、アクションの内部で行う必要があります.間違いも音楽ではなく、動作の中で投げたほうがいい.
派遣する
dispatchは、登録されたアクションを呼び出すインスタンスメソッドです.他の動作内部でも使用できます.任意のパラメータを持ち、ペイロードを使用できます.このときのペイロードは音楽に等しい.

store.dispatch('actionType', payload)

非同期処理がなければ、動作せずに直接コミットすることもできます.しかし、一緒に開発するときに混乱しないようにdispatchを統一的に使うことをお勧めします.
/##コンポーネントでのショップの使用
モジュールの使用
管理情報が多すぎるショップは、モジュール化によりメンテナンス性を向上させることができます.例えば、ユーザ情報や商品情報など、ほとんど関連性のない情報は、個別に管理することができる.

// 모듈을 따로따로 정의하기
const moduleA = {
   state: { ... },
   mutations: { ... }
}
const moduleB = {
   state: { ... },
   mutations: { ... }
}

// 모듈을 스토어에 등록하기
const store = new Vuex.Store({
   modules: {
     moduleA,
     moduleB
   }
})

// 각 모듈의 상태에 접근하기
store.state.moduleA // moduleA의 상태
store.state.moduleB // moduleB의 상태

/##以外の機能とオプション