zoukankan      html  css  js  c++  java
  • 快速、高效的学习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:"方法名称"
                })
              }

  • 相关阅读:
    P1772 [ZJOI2006]物流运输
    P4290 [HAOI2008]玩具取名
    P1859 不听话的机器人
    P1841 [JSOI2007]重要的城市
    P2182 翻硬币
    P1908 逆序对(归并排序)
    P1010 幂次方(分治)
    P3386 【模板】二分图匹配
    P2158 [SDOI2008]仪仗队
    P1582 倒水(贪心 + lowbit)
  • 原文地址:https://www.cnblogs.com/zhouyingying/p/10617353.html
Copyright © 2011-2022 走看看