Vuex实现任意组件间通信

上次说到Vue中组件间通信的几种方式，最后留了一个Vuex,因为比较重要，就在此进行单独说明~

1.首先进行安装，直接输入命令进行安装

npm install vuex --save

安装之后需要在main.js中进行全局引入：

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

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

 2.在src下新建store文件夹,创建index.js，用来存放Vuex

   Vuex有五个属性：

1）state: Vuex的基本数据，用来存储变量,类似于js中的data；

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //
    name: '小白'
  },
  mutations: {
    //
  },
  actions: {
    //
  },
  modules: {
  
  }
})

在需要使用的组件中的computed中进行引用：

<template>
 <div>{{name}}</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'busPage',
  data () {
    return {
     
    }
  },
  computed: {
    // name () {
    //   return this.$store.state.name
    // }
    ...mapState(['name'])// 两种方法都可以
  },
  mounted () {
  
  },
  methods: {
  }
}
</script>

<style>

</style>

2）getters: 从基本数据派生的数据，相当于State的计算属性，比如State里有一个数组，就可以从Getters里获取到数组的长度，或是取到对象里面的属性，用法和计算属性类似:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //
    name: '小白',
    peopleList: [
      {name: '王俊凯', age: 23},
      {name: '冰冰', age: 20}
    ]
  },
  getters: {
    listLength: (state) => { return state.peopleList.length }
  },
  mutations: {
    //
  },
  actions: {
    //
  },
  modules: {
  }
})

在组件中进行接收：

<template>
  <div>
 <div>{{name}}</div>
 <div>{{listLength}}</div>
  </div>

</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'busPage',
  components: {dataAnalysis, regionalManage},
  data () {
    return {
    }
  },
  computed: {
    // name () {
    //   return this.$store.state.name
    // }
    // listLength () {
    //   return this.$store.getters.listLength
    // },
    ...mapGetters(['listLength']),
    ...mapState(['name'])// 两种方法都可以
  },
  mounted () {
 
  },
  methods: {
  }
}
</script>

<style>

</style>

3）mutations：提交更新数据的方法，必须是同步的，如果需要异步使用action,每个mutations都有一个字符串的事件类型（type），和一个回调函数（handler）。这个方法只能用来改变state里面的数据，而且想要改变state里面的数据只能通过mutations里的方法，并且是同步的：

示例说明：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //
    name: '小白',
    peopleList: [
      {name: '王俊凯', age: 23},
      {name: '冰冰', age: 20}
    ]
  },
  getters: {
    listLength: (state) => { return state.peopleList.length }
  },
  mutations: {
    //
    changName (state) {
      state.name = '小黑'
    }
  },
  actions: {
    //
  },
  modules: {
  }
})

下面是组件间的调用：

<template>
  <div>
 <div>{{name}}</div>
 <Button type="primary" @click="changName">改变名字</Button>
  </div>

</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'busPage',
  data () {
    return {
    }
  },
  computed: {
    // name () {
    //   return this.$store.state.name
    // }
    //
    ...mapState(['name'])// 两种方法都可以
  },
  mounted () {

  },
  methods: {
    ...mapMutations(['changName'])
  }
}
</script>

<style>

</style>

 

4）action: 和mutations的功能大致相同，不同之处在于：

①Action提交的是mutations，而不是直接变更状态，Actions里不可以更改state里的数据，state里的数据只能在Mutations里更改。

②Action可以包含任意异步操作。

    简单的说，它就是一个Promise方法，通过不同的状态执行不同的方法，执行方法可以是Actions里的方法，也可以是Mutations里的方法。

    Actions我就不举例子了，因为大部分都用于axios请求接口，简单跟大家说说这个东西怎么使用：

import Vue from 'vue'
import request from '@/api/axios'

const modules = {
    state:{
        list:[]
    },
    actions:{
        getList({ commit }){
            // 调用接口方法
            request.getList()
            .then((response)=>{
                // commit用来分配mutations方法
                commit('getList',response)
            })
        }
    }，
    mutations：{
        getList(state,response){
            state.list = response.data
        }
    }
}

　简单利用actions异步方法分配给mutations方法，然后在mutations方法里给state里的数据赋值，取到接口数据。

　commit用于分配mutations方法，dispatch用于分配actions方法，都需要传参进去。

　　组件调用其实和调用mutations方法类似：

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

这样就基本完成了vuex传值。 

5）modules: 模块化Vuex,可以让每一个模块拥有自己的 state、mutations、action、 getters，使得结构非常清晰，方便管理。modules可以把vuex分为不同的模块，使业务逻辑变得更清晰，更准确。在上面的代码里，有const modules，给它不同的名字就是分为不同的模块。不同的module可以存入不同的数据和方法，使用起来非常方便。