Vuex overview

What is Vuex

Vuex is a mechanism to manage the global state (data) of components. It can easily realize data sharing between components (use store to manage global objects)
How data is shared between components

Parent to child value: v-bind attribute binding

Child to parent value: v-on event binding

Data sharing between sibling components: EventBus

• $on: the component that receives the data
• $emit: the component that sends the data

Benefits of unified management with Vuex

1. It can centrally manage the shared data in vuex, which is easy to develop and maintain later
2. It can efficiently realize the data sharing between components and improve the development efficiency
3. The data stored in vuex is responsive, which can keep the data synchronized with the page in real time.

What kind of data is suitable for storage in Vuex

Generally, only the data shared between components is necessary to be stored in vuex. The private data in the component is still stored in the data of the component itself.

Core concepts of Vuex

State

State provides a unique public data source. All shared data should be stored in the state of the store

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

The first way for a component to access data in a State:

this.$store.state.Global data name

The second way for a component to access data in a State:

//1. Import mapState function from vuex on demand
import {mapStatus} from 'vuex'

Through the mapState function just imported, map the global data required by the current component to the calculated calculation attribute of the current component

computed:{
    ...mapState(['count'])
}

Mutation

Mutation is used to change the data in the Store.

1. The Store data can only be changed through mutation, and the data in the Store cannot be directly operated
2. In this way, although the operation is a little cumbersome, it can centrally monitor the changes of all data

//Define Mutation
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add(state){
            state.count++
        }
    }
})

//Trigger mutation
methods:{
    handle1(){
        this.$store.commit('add')
    }
}

Mutation pass parameters

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

//Trigger mutation
methods:{
    handle1(){
        this.$store.commit('add',3)
    }
}

The second way to trigger Mutations

//1. Import mapMutations function from vuex on demand
import {mapMutations} from 'vuex'

//2. Map the specified changes function to the methods function of the current component
methods:{
    ...mapMutations(['add','addN'])
}

Do not perform asynchronous operations, such as timer operations, in the Mutations function

Action

Action is used to handle asynchronous tasks

If you change data through asynchronous operation, you must use Action instead of Mutation, but in Action, you still need to change data indirectly by triggering Mutation.

//Define Action
const store = new Vuex.Store({
    mutations:{
        add(state){
            state.count++
        }
    },
    actions:{
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000)
        }
    }
})


//Trigger Action
methods:{
    handle(){
        this.$store.dispatch('addAsync')
    }
}

Parameters carried when triggering actions asynchronous task:

//Define Action
const store = new Vuex.Store({
    mutations:{
        add(state,step){
            state.count += step
        }
    },
    actions:{
        addAsync(context,step){
            setTimeout(()=>{
                context.commit('add',step)
            },1000)
        }
    }
})


//Trigger Action
methods:{
    handle(){
        this.$store.dispatch('addAsync',5)
    }
}

The second way to trigger Actions

//1. Import mapActions function from vuex on demand
import {mapActions} from 'vuex'
//2. The specified actions function is mapped to the methods function of the current component
methods:{
    ...mapActions(['addAsync','addNAsync'])
}

Getter

Getter is used to process the data in the Store to form new data.

1. Getter can process the existing data in the Store to form new data, similar to Vue's calculation properties.
2. If the data in the Store changes, the data in Getter will also change

//Scheduled Getter
const store = new Vuex.Store({
    state:{
        count:0
    },
    getters:{
        showNum:state=>{
            return 'The current latest quantity is'+state.count
        }
    }
})

How to use getter

//The first way to use getters:
this.$store.getters.name
//The second way to use getters:
computed:{
    ...mapGetters(['showNum'])
}

example

Request data through axios and store the data in the store

export default new Vuex.Store({
    state:{
        list:[]
    },
    mutations:{
        initList(state,list){
            state.list = list;
        }
    },
    actions:{
        getList(context){
            axios.get('/list.json').then((data))=>{
                console.log(data);
                context.commit('initList',data)
            }
        }
    }
})