Vue零基础高效学习③：组件间通信 / 组件共享数据 / 父子兄弟互传数据 | 万能Vuex大杀器

开胃菜 - 了解即可

动态绑定props

可以传数据也可以传函数

原始：v-bind:
简写：: （简写后是表达式而非字符串）

父组件发送msg：

<Child :msg="msg" />

Child子组件接收：

props: ['msg']

自定义事件

addTodo回调方法写在父组件中

<Header @addTodo="addTodo"/>

子组件触发

this.$emit('addTodo', todo)

消息订阅与发布 pubsub.js

npm安装：

npm i pubsub-js

组件之间相互订阅和发布消息

import PubSub from 'pubsub-js' 
PubSub.subscribe(‘msgName’, functon(msgName, data){ }) //订阅以及回调函数
PubSub.publish(‘msgName’, data) //发布消息 相当于$emit

一般在beforeDestroy()中取消订阅：

PubSub.unsubscribe(token): 

全局事件总线

在创建vm的时候进行添加（main.js）

new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
	Vue.prototype.$globalEventBus = this
},
}).$mount('#root')

组件中使用：

this.$globalEventBus.$on('doAnything', this.doAnything) //绑定事件，相当于上面的订阅subscribe
this.$globalEventBus.$emit('doAnything', msg) //触发事件
this.$globalEventBus.$off('doAnything') //解绑事件

Vuex - 常用大杀器

Vuex基本流程：

• Acitons：
  处理复杂的业务逻辑，比如判断数值大小
• Mutation：
  直接处理业务，比如数组添加元素
• State：
  数组 or 状态 一个意思罢了

安装Vuex

npm i vuex

加-g可全局安装
--save默认省略

如果出现：

cnpm : 无法加载文件 C:\Users\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

管理员模式打开powershell并输入：

set-ExecutionPolicy RemoteSigned

查看npm包

npm ls 

-g是全局包
–depth 0 不显示依赖的包

组件化Vuex

即多个Store仓库管理不同的数据
如下图：

使用流程

1.创建模块化Store

• Store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import StoreList1 from './StoreList1'
import StoreList2 from './StoreList2'
Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        StoreList1,
        StoreList2
        
    }
})

• StoreList1

import axios from "axios"

export default {
    namespaced:true,
    actions: {},
    state: {
        soup: '',
        fart:'',
        info:['list1-111','list1-111']
    },
    mutations: {
        getOne(state,value) {
            axios.get('https://api.uixsj.cn/hitokoto/get?type='+value).then((result) => {
                state[value] = result.data
                
                
            }).catch((err) => {
                console.log(err);
            });
        }
    },
}

• StoreList2

export default {
    namespaced:true,
    state: {
        info:['list2_111','list2_222']
    },
    mutations: {},
    
}

2.创建Vue实例引入

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

3.组件中使用

ComponentList1：

<template>
    <div>
        <h1>{{soup}}</h1>
        <ul>
            <li v-for="item,index in info" :key = index>{{item}}</li>
        </ul>
    </div>
</template>
<script>
    import { mapState,mapMutations } from "vuex";
    export default {
        computed: {
            ...mapState('StoreList1',['info','soup']),
        },
        methods: {
            ...mapMutations('StoreList1',['getOne'])
        },
        mounted() {
            this.getOne('soup')
        },
    }
</script>

ComponentList1：

<template>
    <div>
        <h1>{{fart}}</h1>
        <ul>
            <li v-for="item,index in info" :key = index>{{item}}</li>
        </ul>
    </div>
</template>
<script>
    
    import { mapState,mapMutations } from "vuex";
    export default {
        computed: {
            ...mapState('StoreList2',['info']),
            ...mapState('StoreList1',['fart'])
        },
        methods: {
            ...mapMutations('StoreList1',['getOne'])
        },
        mounted() {
            console.log(this);
            this.getOne('fart')
        },
    }
</script>

App.vue

<template>
  <div id="app">
    <ComponentList1/>
    <ComponentList2/>
  </div>
</template>
<script>
import ComponentList1 from './components/ComponentList1.vue';
import ComponentList2 from './components/ComponentList2.vue';
export default {
  name: 'app',
  components: {
    ComponentList1,
    ComponentList2
  },
}
</script>

最终效果