第三弹 Vue项目总结（子与父通信，Vuex）

2019-08-26 225 阅读2分钟

子接收数据的处理展示（监听父属性进行更改）

计算属性的方式

子组件可以通过接收父组件的属性，并computed起来，用新结构return展示（监视添油加醋）
通过遍历原来的数组，定义新的数组方式，将数据动态加进去，重新放到新的数组return出去，外部在遍历新的数组

子向父通信

子组件动态更改展示出来的父组件传过来的数据（数据流是父到子的向下数据流，父改变，子才能同步更改）

函数的传递：在父组件做一个函数，定义一个参数数据，绑定在父组件上，子组件则再重新声明绑定在父组件上的函数，将需要更改的参数传进去，通过更改父组件的方式，在把值传给子组件
EventBus

建造一辆车

import Vue from 'vue'
let Bus = new Vue();
export default Bus;

开往父组件中去，在初始数据的时候进行将他带上车
```
Bus.$on('changeStus',function(data){
   this.stus = data;
})
```

将子组件带上去，让他自己跟父组件谈判

change() {
   Bus.$emit('changeStus',[1,2,3]); //让父组件的数据数组改成想要的}

子接收数据更改

父组件中bind属性与绑定事件二合一 <son v-bind: imgs.sync="imgs"/>
触发以上事件 this.$emit('update:imgs',[]);

数组的转化

test.goodsObj={87:1,88:8}
Object.keys(test.goodsObj) = ["87","88"]
Object.keys(test.goodsObj).join(',') = "87,88"

购物车块

小球过渡过程实现

对小球做动画样式处理 `animation: bounce-in 1s;` ---此时样式是在`.ball-enter-active`状态下
在小球离开的时候需要设置 `opacity: 0;`----此时在`.ball-leave`状态下

需要给小球一个事件（这个方法是让小球显示，其次改变购物车的数目）

<transition name="ball" @after-enter="afterEnter">
  <div class="ball" v-if="isShow">
</div>
</transition>

购物车的数字实时改变

定义一个全局的公交车

import Vue from 'vue';export default new Vue();

在底部写购车车的html中，初始化页面的时候，让他先上车
```
MyBus.$on('addShopcart',(num) => { this.totalNum += num;})
```

在产品的详情页中触发小球的方法里，向子页面传值

MyBus.$emit('addShopcart',this.buyNum) //buyNum已执行加减后的值

将购物车的值存到内存中，这边定义一个js来存储

let obj = {
    goodsObj: {'87':1,'88':5},
    addShopcart({id,num}){
        if(this.goodsObj[id]) {
            this.goodsObj[id] += num;
        } else {
            this.goodsObj[id] = num;
        }    
}}window.test = obj;export default obj;
//详情页面中
GoodsTools.addShopcart({ //控制台输入test   id: this.info.id,   num: this.buyNum})

给数组的元素添加属性（使用await的时候使用ES6中的map/each/find/findIndex没有效果），await是控制异步转成同步

vuex

mutation 对 state的操作只能同步，异步的需要用mutation，否则会丢失记录
各自更改全局共享数据（state），不必担心组件通信
更改方式 mutation 增删改
获取方式 getter
业务行为 action 调用改变的方式（action可以发送请求，存在异步行为）
万一异步存在于mutation中会导致本次改动数据的记录丢失,分发 action。这是触发 state 变化的惟一途径。
```
this.$store.dispatch(某action,数据)
```
避免程序出现bug和调试的不方便

通过dispatch（‘store的actions里的函数方法’，参数）
store中的执行actions的方法进行commit调用mutations的方法
通过mutations 的方法更改state，从而改变视图

vuex中的mapGetters
此处是将对象中的key和value进行展开声明，三个点的目的是将一个对象分解成多个key和value
使用条件：关系复杂，不确定哪里需要更改，丢给vuex接收信号，让他去全局判断更改
```
流程  dispath -> module: (actions -> mutation -> state|getters)
```

坑

原本的数据不存在，新增一个，需要手动的去实现这个响应式
Object.defineProperty的操作来实现
commit=>mutations,用来触发同步操作的方法。
dispatch =>actions,用来触发异步操作的方法。
例子

创建一个数据name给vuex（app.vue）
到store.js中在actions: { }函数中进行添加属性
在store.js中的mutation的方法中挂一个属性（由于一开始state是没有声明name，所以需要进行响应数据set，此处不进行vue.set则第6点输出为undefined，控制台有数据，但是视图无数据，如果在state数据中已经声明存在name则此时就直接执行else的方法）
```
import Vue  from 'vue'
Vue.set(数据函数中, 属性,对应的值)
```
在getters：{ }中进行return出数据
在vue.js中还要进行取刚刚在getters的函数
在html则输出 {{getName}}