Vuex学習記録各属性の詳細と使用方法

1.1コンポーネント間でデータを共有する方法

親から子への値転送:v-bindプロパティバインド

子親への値の伝達:v-onイベントバインド

兄弟コンポーネント間共有データ:EventBus

$onデータを受信するコンポーネント

$emitがデータを送信するコンポーネント

1.2 Vuexとは
Vuexはコンポーネントのグローバル状態(データ)管理を実現するメカニズムであり、コンポーネント間のデータの共有を容易に実現することができる.
一般的には、コンポーネントの横に共有データステータスオブジェクト(store)を定義します.
1.3 Vuexによる統合管理のメリット

は、Vuexで共有するデータを集中的に管理することができ、

の開発と後期メンテナンスが容易である.

は、コンポーネント間のデータ共有を効率的に実現することができ、開発効率を向上させる

である.

vuexに格納データはいずれも応答式であり、ページとの同期をリアルタイムで保持できる

.
1.4どのようなデータがVuexに格納するのに適しているか
一般的には、コンポーネント間で共有されているデータだけが、Vuexに格納する必要があります.コンポーネント内のプライベートデータは、コンポーネント自体のdataに格納すればよい.
すべてのデータをvuexに置いてもいいですが、実際のニーズを見てみましょう.
2.Vuexの核心概念
2.1コアコンセプトの概要
Vuexの主な核心概念は以下の通りである.

State

Mutation

Action

Getter

2.2 State
Stateは唯一の共通データソースを提供し、すべての共有データはStoreのStateに統合して格納する.

 
//  store   ，        
const store = new Vuex.Store({
    state:{count:0}
})

>      State         
this.$store.state.      `

>      State         
>`//1. vuex     mapState   
import {mapState} from 'vuex'
//2.        mapState  ，            ，        computed    
computed:{
    ...mapState(['count])
}

コンポーネント内でグローバルstoreのデータを直接変更することは許されません
2.3 Mutation
MutationはStoreのデータを変更するために使用します

はmutationでのみStoreデータを変更することができ、Storeのデータ

を直接操作することはできない.

このように操作することは煩雑であるが、すべてのデータの変化を集中的に監視することができる

.

//   mutation
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add(state){
            //     
            state.count++
        }
    }
})
//   mutation
methods:{
    handles(){
        this.$store.commit('add')
    }
}

パラメータはmutationがトリガーされたときに渡すことができます

//  mutation
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        addN(state.step){
            //    
            state.count+=step
        }
    }
})
 

 
//  mutation
methods:{
    handle2(){
        //  commit  
        //  mutations     
        this.$store.commit('addN',3)
    }
}

mutationsをトリガする第2の方法
this.$store.commit()はmutationsをトリガする第1の方法であり、mutationsをトリガする第2の方法である.

//1.  vuex     mapMutations  
import {mapMutations} from 'vuex

先ほどインポートしたmapMutations関数で、必要なmutations関数を、現在のコンポーネントのmethodsメソッドにマッピングします.

// 2.     mutations  ，        methos  
methods:{
    ...mapMutations(['add','addN'])
}

2.4 Action
Action非同期タスクの転送処理に使用
非同期操作でデータを変更する場合は、Mutationを使用せずにActionを通過しなければならないが、ActionではMutationをトリガすることで間接的にデータを変更する

//  Action
const store = new Vuex.Store({
    //...
    mutations:{
        add(state){
            state.count++
        }
    },
    actions:{
        addAsync(context){
            setTimeout(()=>{
                context.commit('add)
            },1000)
        }
    }
})
 
//  Action
methods:{
    handle(){
        //  actions      
        this.$store.dispatch('addAsync')
    }
}
 
import {mapAction} from 'vuex'

Actions非同期タスクのトリガー時にパラメータを携帯

//   Action
const store = new Vuex.Store({
    mutations:{
        addN(state,step){
            state.count+=step
        }
    },
    actions:{
        addNAsync(context,step){
            setTimeout(()=>{
                context.commit('addN',step)
            },1000)
        }
    }
})
//  Action
methods:{
    handle(){
        //   dispatch  
        //   actions     
        this.$store.dispatch('addNAsync',5)
    }
}

`
actionsをトリガする第2の方法
1つ目はthis.$store.dispatch()はactionsをトリガする最初の方法です

// 1.  vuex     mapActions  
import {mapActions} from 'vuex
//2.     actions  ，        methods  
methods:{
    ...mapActions(['addAsync','addAsync'])
}

2.5 Getter
GetterはStoreのデータを加工処理して新しいデータを形成する

Getterは、Vueの計算属性

と同様に、Storeに既存のデータを加工処理して新しいデータを形成することができる.

Storeではデータが変化し、Getterのデータも

に変化する.

 //  Getter
const store = new Vuex.Store({
    state:{
        count:0
    },
    getters:{
        showNum:state=>{
            return '        【'+state.count+'】'
        }
    }
})

>//  getters      
this.$store.getters.  
//     
import {mapGetters}from 'vuex'
computed:{
    ...mapGetters(['showNum'])
}