Vuex4 (1)


Vuexの概念の総括とVue 3バージョンの中のVuex 4の用法の総括

Vuexとは?


VuexはVueです.jsのステータス管理用ライブラリ
アプリケーションのステータスは、予測可能な方法でのみ変更できるルールと、アプリケーションのすべてのコンポーネントの集中リポジトリです.

ステータス管理モードとは?



一方向データ・ストリームの例

<template>
	<div>{{count}}</div> 
	<!--View-->
</template>
<script>
export default{
    data(){
    	return{
       	    count:0 // State
        }
    },
    methods:{
     increment () { //Action
      	this.count++
     }
   }
}
</script>
State:アプリケーション実行のメインステータス
View:ステータスへのマッピングステータスの表示
Action:反応(イベント)に基づいて状態を変換する方法
上記の方法では最も簡単なデータストリームを実現できるが,上記の方法には限界がある.
質問1:1つの状態の複数のビューで使用する必要がある場合
質問2:他のビューで同じ状態を変更する必要がある場合
問題1では,親子関係ではprops伝達を用いることができるが,兄弟間の状態伝達は機能しない.
問題2では、解決策は、親/子の状態を直接変更するか、イベントによって状態を変更および同期する複数のコピーに依存することが多い.このモードは壊れやすくメンテナンスが難しい.
ステータス管理に関連する概念を定義して分離し、ビューとステータスの間の独立性を維持するルールを適用して、コードにより多くの構造とメンテナンス性を提供します.
Vuexの設計および概念は、FluxReduxThe Elm Architectureを参照する.また他のモードとは異なり、Vue.jsに基づいて調整されるライブラリ.

スモールプロジェクトではVuexを使用する必要はありませんが、中規模を超えるとステータス管理が困難になります.