13-基础-vuex-mutations

### day13-基础-重点

> vuex+webpack

#### 06-基础-组件通信-父子组件通信-子传父

> 回顾
>
> 父传子->props
>
> 1. 子组件props:["a"]
> 2. 使用组件<a :a="父组件的data数据"></a>
> 3. 子组件{{a}}
>
> 子传父->this.$emit
>
> 1. 使用子组件时<a @自定义事件名b="父组件fn方法">
> 2. 子组件中触发事件b this.$emit("b",参数c)
> 3. 父组件中fn(argv){argv就是参数c}
>
> > 注意:this.$emit()->触发事件

> 补充: props是单向数据流

#### 07-基础-组件通信-兄弟组件通信

> 兄弟组件B把data的数据传递给兄弟组件C使用

> busEvent.js(中央事件总线):给其他文件提供了共享/公用的对象(newVue())

1. B中 触发事件vm.$emit("event",值num)
2. C中 绑定事件vm.$on("event",(argv)=>{argv就是值num})

> 注意:先绑定事件,再触发事件

#### 08-基础-vuex-状态管理流程

> vuex是Vue插件->状态管理->数据管理->
>
> 1. 多个组件使用同一个数据
> 2. 父传子
> 3. 子传父
> 4. 兄弟组件

> vuex使用场景:只针对数据复杂的Vue项目

> vuex流程

1. state->声明数据(组件可以用,响应式)
2. actions->和后台交互(ajax请求)->返回新结果
3. mutations->修改state,接收actions传递的结果

> 非常重要!

#### 09-基础-vuex-state

> 作用: 声明数据
>
> 使用:
>
> 1. 视图中

```html

{{$store.state.count}}

2. js->state的count对应的组件的计算属性

 computed: {
    count() {
      return this.$store.state.count;
    },
        

10-基础-vuex-mapState

目的:简化state的使用

computed:{
    ...mapState(["count"])
}
// 视图中{{count}}

11-基础-vuex-getters

getters:不是Vuex核心组成部分

场景:如果state中的数据b依赖了数据a,此时b就是getters的数据

getters: {
    msgNew(state) {
      return state.msg + "xyz"
    }
  }

使用

    <p>{{$store.getters.msgNew}}</p>

12-基础-vuex-mapGetters

computed: {
    ...mapGetters(["msgNew"]),
    ...mapState(["count"])
  },

13-基础-vuex-mutations

mutations:修改state的数据

mutations: {
    fn1(state, payload) {
      console.log(payload);
      console.log("fn1-----");
      state.count = payload.num;
    }
  }

组件的methods

 fn11() {
      // 调用mutations中的fn1
      this.$store.commit("fn1", { num: 200 });
    }

mutations中的方法触发的条件->必须通过commit()

14-基础-vuex-mapMutations(欠视频)

mutations中的方法在组件中的接收者时methods

methods: {
    // fn11(){
    //   this.$store.commit("fn1",100)
    // }
    // 在methods中有一个fn1方法,
    getData() {
      this.fn2();
    },
    // fn2(){
    //         this.$store.commit("fn2")
    // }
    ...mapMutations(["fn2"])
  }

注意: mutations方法只能写同步的

应用vuex->小项目->模板/套路+webpack配置(了解)->大厂->webpack配置工程师