• 快速、高效的学习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:"方法名称"
                })
              }

  • 相关阅读:
    ZooKeeper-3.3.4集群安装配置
    zookeeper原理(转)
    flume 转
    Flume NG 简介及配置实战
    Flume NG 配置详解
    '增量赋值(augmented assignment)', 多么痛的领悟!
    用matplotlib制作的比较满意的蜡烛图
    Spyder code editor里的小秘密: 右侧高亮提示
    pywinauto: 导入时遇到 "TypeError: LoadLibrary() argument 1 must be string, not unicode"
    爬取新浪财经个股的历史财报摘要
  • 原文地址:https://www.cnblogs.com/zhouyingying/p/10617353.html
Copyright © 2020-2023  润新知