快速、高效的学习vuex

Vuex是一个公共状态管理模式,最好的一种非父子组件传值的一种方案.

1、vuex数据传递的流程
      当组价需要修改state中的数据的时候必须通过dispatch来触发actions里面的方法,actions的每一个方法里面都会有一个
      commit方法,用来触发mutations里面的方法,  mutations用来修改state中的数据。当mutations里面的方法触发的时候数据
      就会发生改变,因为数据是响应式因此组件中的数据也会发生改变

2、  actions
        用来处理异步 以及一些业务逻辑

        actions里面所以的函数都会有2个参数
        参数1 为一个对象 包含{commit dispatch state}
        参数2:是传递过来的参数

        actions里面的方法如果想要触发的时候必须通过dispatch

        辅助函数
        mapActions

          方案一:
            methods: {
                ...Vuex.mapActions(["handleAdd"])
              }


          方案二:
               methods: {
                  ...Vuex.mapActions({
                      Add:"handleAdd"
                  })
              }

    mutations
        用来做数据的增删改查   mutations里面的方法用来修改state中的数据

        mutations里面的所有函数都会有2个参数
          参数1:state
          参数2:传递过来的参数


        mutations里面的方法想要触发的时候必须通过commit



        辅助函数
        mapMutations
              methods: {
                ...Vuex.mapMutations(["handleMutationAdd"])
              }


               methods: {
                ...Vuex.mapMutations({
                  handleMutationAdd:"handleMutationAdd"
                })
              }




      getters:
          getters就相当于组件中的computed一样,也是可以进行数据的缓存
          主要的作用:监听state中数据的变化,当state中的数据发生改变的时候就会触发getters里面的方法


          getters中的每一个函数都会有一个参数 这个参数是state


          辅助函数
          mapGetters


          computed:{
            ...Vuex.mapGetters(["方法名称"])
          }

          computed:{
            ...Vuex.mapGetters({
              key:"方法名称"
            })
          }

posted @ 2019-03-28 20:13  zyy玫瑰花  阅读(119)  评论(0编辑  收藏  举报