13-基础-vuex-mutations

```

day13-基础-重点

vuex+webpack

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

回顾

父传子->props

1. 子组件props:["a"]
2. 使用组件<a :a="父组件的data数据">
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. 视图中

{{$store.state.count}}

1. 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配置工程师

```