Vuex实现任意组件间通信

63 阅读 0 评论 42 点赞

我是靠谱客的博主花痴胡萝卜，最近开发中收集的这篇文章主要介绍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可以存入不同的数据和方法，使用起来非常方便。