补：Vue--组件间的通信

《用库：消息订阅与发布》

 

 引入是在要用的组件中去引入的

其可以实现任意组件中的通信

对于要收到消息的组件来说，其要先订阅消息：

 引入了pubsub，其是一个对象，pubsub.subscribe(),用来订阅消息，

其中的“demo”为消息的名称，（）=》写箭头函数是为了让this保持为VC，

其中的两个参数，第一个是消息的名称，第二个是消息的内容

最后，最好在组件销毁时解绑事件，解绑事件要用如上的方法

对于要发送消息的组件来说：

 

 通过pubsub.publish(),以"demo",消息名称来联系到自己要发送给谁，第二个参数是发送的内容

《全局事件总线》

 

 我想要B组件传值给A组件，可以将事情交给x(其不是组件)来做

首先A组件找到X，并在他身上绑定了一个事件，只要这个事件触发了，（）=>函数被调用

B组件上找到X，并触发事件，事件被触发了，（）=>函数在A组件上执行

 《关于这个x》

这个x首先要被全部的组件看到，

 根据这个图片，应该要在Vue.prototype上更好

而且X要能够调用到$on,$emit,$off这些API；

可以如下：

 

 

 通过Vue.extend({}),来得到VueComponent这个构造函数

 

 

 在自己手动new一个Vc实例对象出来，即X

但是这样写还不是最终的写法：我们完全可以用Vm身上绑定,而不用Vc

 

 

 一般x叫$bus;

对于this.$bus.$on('自定义事件'，（）=>{})

最好写上

beforeDestroy（）{

　　this.$bus.$off('自定义事件');

}

 《Vuex》

 

 这个主要是对共享数据进行管理，Vuex主要适用于：

 

 

 以前用全局事件总线中的共享数据：

 

 

 A组件中的数据，A,B,C,D都要用，但是为了以后统一修改这个X的数值，就很麻烦

一个组件要写两条线来分别得到，修改数据

但是在Vuex中：

 

 

 《工作流程》

 

 提醒：actions的作用是在与Backend API对话上，比如我不知道data是什么，要问后台，这时actions就回去问

但如果我一开始就知道data，那么可以直接用commit与mutations对话

《现在我代码实现一下上面的流程》

比如我点击按钮，会自动求和加数的功能

首先要 npm i vuex@3

 

 

 配置如上文件

 

 

 如下是context的内容：

 

 

在actions中通过commit将指令传给muatations

mutations能够收到state从而得到里面的公共数据

在main.js中:

 

 

 一旦Vue.use(Vuex)了，那么在vc,vm上都能看到store

 所以能够使用如上

这个getters相当于是配置在store/index.js中的公共计算属性，可以给多个人使用

 《关于map的知识点，我暂时不去详细了解，只是为了让自己知道有这个知识点》

 详细去看尚硅谷的Vuep112,p113,其作用主要是为了简写，简化代码而生的。

《好了，我来了解了》

《mapState,mapGetters》

 

 

 一般情况下，会不会觉得上面这样写十分的麻烦，能不能直接写sum,persons.length这用呢？

我们可以用计算属性来：

 

 

 但是这样治根不治本，写计算属性更麻烦了

在vuex中有这样一个方法：mapState,

其通过我们传入配置可以自动帮助我们生成上述computed中的代码

 

 

 

 

 这个是对象的写法，其中key（键）是表明计算属性的名字，value(值)表明是return this.$store.state.（state中的那个数据）

 

mapState生成了一个对象，其中是两个我传入配置而生成的函数，

则我们真正写时，为了将对象中的函数取出来则：

 

 

 上述分别是数组写法与对象写法

mapGetters与上述写法差不多

《mapMutations 与 mapActions》

 

 

 像这个有没有上述的写法？

有的通过

 

 

 mapMutations同理

《实现往store.state中添加数据》

其实添加数据也是上面的一套流程，即在组件中通过this.$store.commit(或.dispatch)发动指令，与要添加的数据

到store/index.js来完成，如下：

这个组件实现添加输入的人名

调用this.$store.commit后在store/index.js文件中匹配方法

 即完成；

 《vuex的组件化》

 

 当只有一套actions,mutations,state时，数据一多，很难维护，必须按照功能，进行模块化

 如图按照功能进行了模块化，并在Store中进行了配置，然后当然要改变，组件中的数据写法了

 如图利用简写形式的，必须在前面的参数中说明是来自哪个模块下的state(mutations,actions)

那么自己写呢？

 

在模块化之后，我的模块跑到$store.state中去了，而且这个里面就是我模块中state中的数据

 

 

有：