VueXシステム紹介

先に書く

I. コンセプト

vuex は、vue のプロジェクト開発で使用する状態管理ツールです。プロジェクト開発において、データ値の同期にコンポーネントパスを多用すると、プロジェクトが巨大化した後の管理やメンテナンスに使いにくくなります。

II.使用

• npm install vuex --save
• src配下にstore/index.jsを新規作成します。
• index.jsを初期化します。

import obj from 'vue';
import b from 'vuex';
obj.a(b);
const bar = new b({ 'state': { 'name': 'helloVueX' } });
export default bar;

• 現在のプロジェクトのVueインスタンスmain.jsにストアをマウントします。

new Vue({
 el: '#app',
 router,
 store, //store:store ルーターと同様に、作成したVuexインスタンスをこのvueインスタンスにマウントする。
 render: h => h(App)
})

• を使用できます。

<h1>{{ $store.state.name }}</h1>// 
 
 methods:{
 add(){
 console.log(this.$store.state.name) //コンポーネント・メソッドの内部
 }
},

属性

• 変異は、状態データを操作するメソッドの集まりで、データの追加、削除、変更を行います。

• 基本的な使い方だ：
   a.パラメータを運ぶ：
   b.state: VueXオブジェクトの状態
   c.payload:このメソッドが呼ばれたときに渡されるパラメータ
  

this.$store.commit('edit',15) // 
this.$store.commit('edit',{age:15,sex:'男'}) // 
this.$store.commit({
 type:'edit',
 payload:{
 age:15,
 sex:'男'
 }
})
edit(state,payload){ //マウントされたパラメータを受け取る
 state.name = 'jack'
 console.log(payload) // 15或{age:15,sex:'男'}
}

• 状態のメンバの追加と削除

Vue.set(state, 'age', 0xf);
Vue.delete(state, 'age');

• Getters国家のメンバーの処理は外部に伝えられる。
   a.state:現在のvuexオブジェクトの状態オブジェクト
   b.getters:現在のゲッターの下にある他のゲッターを使用するために使用される。
  

getters:{
 nameInfo(state){
 return " :"+state.name
 },
 fullInfo(state,getters){
 return getters.nameInfo+' :'+state.age
 } 
}
this.$store.getters.fullInfo //コンポーネントを呼び出す。

• ミューテーション・メソッドで直接アクションを実行すると、非同期操作によってデータ障害が発生するため、非同期操作専用のアクションを提供し、最終的にミューテーション・メソッドをサブミットします。

 a.context:コンテキストオブジェクト
 b.payload:マウントパラメータ

actions:{
 aEdit(context,payload){
 return new Promise((resolve,reject)=>{
 setTimeout(()=>{
 context.commit('edit',payload)
 resolve()
 },2000)
 })
 }
}
this.$store.dispatch('aEdit',{age:15}) //コンポーネントを呼び出す

• モデル プロジェクトが巨大な場合は、モジュール管理を使用して、ストアをモジュールに分割することができます、各モジュールは、独自の状態、変異、アクションとゲッターを持っています。

models:{
 a:{
 state:{},
 getters:{},
 ....
 }
}
this.$store.state.a // 
this.$store.commit('editKey')
this.$store.dispatch('aEditKey')
//以前と同じようにメソッドをコミットまたはディスパッチする。,
//モジュール内の対応する型のすべてのメソッドを自動的に実行する。

• モジュールの詳細

//モジュール内のミューテーションやゲッターのメソッドが受け入れる最初のパラメーターは、それ自身のローカル・モジュール内のステートである。
models:{
 a:{
 state:{key:5},
 mutations:{
 editKey(state){
 state.key = 9
 }
 },
 ....
 }
}
//gettersメソッドの3番目のパラメータはルート・ノードの状態である。
models:{
 a:{
 state:{key:5},
 getters:{
 getKeyCount(state,getter,rootState){
 return rootState.key + state.key
 }
 },
 ....
 }
}
//actionsローカル・モジュールの状態を取得するメソッドは、コンテキスト.state,
//ルートノードの状態はコンテキストである.rootState
models:{
 a:{
 state:{key:5},
 actions:{
 aEidtKey(context){
 if(context.state.key === context.rootState.key){
 context.commit('editKey')
 }
 }
 },
 ....
 }
}

カタログの仕様構造

 store:.
 │ actions.js
 │ getters.js
 │ index.js
 │ mutations.js
 │ mutations_type.js ##この項目は、ミューテーション・メソッドの定数を保存するためのファイルであり、必要に応じて追加することができる。
 │
 モジュール
 Astore.js

V. イラスト