vuexステータス管理モードのstateプロパティ

一、Vuexとは何ですか.

vuex       vue               。 vuex          ？
     vuex ，        vuejs             ：

1.親コンポーネントから子コンポーネントへの通信

は、propsキーワード、すなわち親コンポーネントによって属性をバインドし、この属性を関連props[‘attr’]を介してサブコンポーネントに渡す.

2、サブアセンブリから親アセンブリへの通信

サブコンポーネントはキーワードemit(‘eventType’)を介して親コンポーネントに通信し、親コンポーネントはこの属性をバインドすることによってdomの更新をトリガーする.

3、親子以外のコンポーネントの通信

非親子コンポーネントの通信は、通常、空のvueコンストラクタをインスタンス化することによって状態を管理する.

const bus = new Vue()

その後、コンポーネントAのコンテンツでbus.$Emit(‘event’,params)はイベントを発行する.

コンポーネントB内はbus.$on(‘event’,params=>console.log(params))は、コンポーネントAからの要求を傍受する.

*しかし、私たちのプロジェクトのデータがますます膨大になるにつれて、上記のいくつかの方法のデータ通信にはいくつかの悪いところがあります.

複数のコンポーネントが1つのデータを共有する場合、各コンポーネントがpropsまたは$emitを必要とするのは特に面倒です.

データ管理はあまり明らかではなく、一方向データの簡潔性が破壊され、後期のメンテナンスが不十分である.

vuexのstate属性は、この属性を学習するときにvuex状態とは何かを認識しますか?

ステータスはデータソースとも呼ばれ、vuexがコンポーネントで共有されているdataを抽出して個別のstate属性の下に配置し、stateは1つのオブジェクトであり、複数のステータスを管理することができる.

2つのコンポーネントAとコンポーネントBがあります
プロジェクトルートディレクトリの下にstoreフォルダを新規作成し、そのフォルダの下にindexを新規作成します.jsファイルは、すべてのサブコンポーネントでこのstoreを使用できるように、入口jsファイル(main.js)にstoreフォルダの下のindexを導入する.js(import store from'./store')を使用して、storeをvueインスタンスの下にvueインスタンスのプロパティstoreとしてマウントします.
store/index.js
Vue.use(Vuex); export default new Vuex.Store({ state: { count: 0 } });
コンポーネントA:export default{computed:{//属性を計算してcount状態を返し、状態が変化すると結果count:function(){return this.$store.state.cont//}}を再計算します.
Aコンポーネントが複数のステータスを取得する必要がある場合、vuexが提供するmapState補助関数を使用して計算プロパティの生成を支援することができ、便利です.
コンポーネントA:import{mapState}from‘vuex’//mapStateメソッド単独導入
export default{computed:mapState([‘状態1’,’状態2’,...])}
*ただし、ローカル計算アトリビュートとどのようにブレンドして使用すればよいのでしょうか.es 6で提供されるオブジェクト演算子...を使用して、複数のオブジェクトをマージできます.最終オブジェクトをcomputedプロパティに渡すことができます.
export default{computed:{...mapState([‘状態1’,’状態2’,...]),arrs:function()/ここではローカルコンピューティング属性return arr.filter(item=>item.charCodeAt()>110).join(")}}
最後に、後で他のデータを追加する場合は、この倉庫(store)ファイルの下にデータを直接置くことができ、必要なこの状態はmapStateメソッドで直接導入することができます.これにより、ビューの更新がトリガーされます.