Vue inter-component communication -Vuex

　　Vue on the back said between communications components, leaving a last Egg ~~~ Vuex. Vuex is another component of communication methods, this section said Vuex (store warehouse).

　　 There are many first Vuex need to install, install the way in here is not elaborate. I am the way through npm installed:

npm install vuex --save

After installing the need to main.js in global introduction:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
new Vue({
el:'#app',
store,
components: { App },
template: '<App/>'
})

　　This completes the Vuex installation. Then there is the Vuex usage:

　　Vuex has five attributes: State, Getter, Mutation, Action, Module.

　　1. State is placed in the data warehouse, similar to the js in the data:

import Vue from 'vue'

const modules = {
    state:{
        name: '小白'
    }
    namespaced: true
}

export default modules

　　Vuex put into store files under src, the construction of a new component modules, and then he throws, the components required for data to be introduced:

<script>
import { mapState }from 'vuex'
export default {
    computed:{
        // name(){
        //     return this.$store.state.name
        // }
        ...mapState(['name'])
    },
    mounted(){
        console.log(this.name)
    }
}
</script>

　　Vuex where the data needs to be obtained from the calculation properties (computed), I wrote my two commonly used methods, can receive data, print out the mounted hooks in the data:

　　Here is just an example to teach you how to use, do not recommend you to write to me, Vuex should be used for all the business logic of the data. Not related to business logic, we proposed a method previous chapter: inter-component communication Vue .

　　2. Getters in put data in the State of extended data, it can be counted as property. There is an array of such State, Getters can obtain from the inside to the length of the array, or to take the object inside the properties, usage and the like calculated properties:

import Vue from ‘vue’

const modules = {
    state:{
        list:[
            {id :1,content: '第一条'},
            {id :2,content: '第二条'}
        ]
    }，
    getter:{
        listLength: (state)=>{return state.list.length}
    },
　　 namespaced: true
}

export default modules;

　　I exist in an array state, and then calculate the length of getters in the state array, the next component is received in the inside:

<script>
import { mapGetters } from 'Vuex'
export default {
    compoted:{
        ...mapGetters(['listLength'])
    },
    mounted(){
        console.log(this.listLegth)
    }
}
</script>

　　Open print out the console 2, is the length of the array list.

　　3. Mutations method is stored in the warehouse, this method can only be used to change the state of the data inside, and want to change the state where the data can only be used mutations in the method, and the method which it can only be synchronized:

import Vue from 'vue'

const modules = {
    state:{
        name: '小黑'
    },
    mutations:{
        changeName(state){
            state.name = '小白'
        }
    },
    namespaced: true
}

export default modules;

　　Or that example, here is the component method call:

<html>
<div>
    {{ name }}
    <el-button @click="changeName">改变名字</el-button>
</div>
</html>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
    compoted:{
        ...mapState(['name'])
    },
    methods:{
        ...mapMutations(['changeName'])
    }
}
</script>

　　When the page is rendered:

　　After clicking the button as follows:

　　Components in the button by calling Vuex in the mutation method Vuex in the state data changes, but mutations can only synchronous method, involving an interface can not write in it, how do? Look down:

　　4. Actions Vuex and mutations are the same as in the method, but they are the two biggest difference:

　　　　(1) Actions can be stored in an asynchronous method, while Mutations can only put synchronization;

　　　　(2) Actions in the state where the data can not be changed, state where the data can only be changed Mutations in.

　　Actions are what method? Simply put, it is a Promise method, perform different methods in different states, the method can be executed in the Actions methods, it can be Mutations in the method.

　　Actions son I do not, for example, because most of them for axios request interface, easy to talk with you how to use this thing:

Vue from Import 'VUE' 
Import Request from '@ / API / Axios' 

const modules = { 
    State: { 
        List: [] 
    }, 
    Actions: { 
        the getList (the commit {}) { 
            // calls the interface method 
            request.getList () 
            . the then ((Response) => {
                 // the commit mutations method for dispensing 
                the commit ( 'the getList' , Response) 
            }) 
        } 
    }, 
    mutations: { 
        the getList (State, Response) { 
            state.list = response.data 
        } 
    } 
}

　　Simple asynchronous method using the actions assigned to mutations method, and to a state where data mutations assignment method is taken, and the interface data.

　　A method for dispensing mutations commit, dispatch method for dispensing actions, parameters need to pass into.

　　In fact, calling component calls and mutations similar method:

<script>
import { mapState,mapActions } from 'vuex'
export default {
    computed:{
        ...mapState(['list'])
    },
    mounted(){
        this.getList()
    },
    methods:{
        ...mapActions(['getList'])
    }
}
</script>

　　This completes the vuex by value.

　　5. module can be divided into different modules vuex the business logic become clearer and more accurate. In the above code, there are const modules, giving it a different name is divided into different modules. Different module can be stored in different data and methods, ease of use.

Vue inter-component communication -Vuex

Guess you like