精华内容
下载资源
问答
  • Store 存储之 dispatch && commit 一、存在即合理 1. Store   当我们在使用 vue 时,同一个数据可能需要被多处复用,你可以选择创建一个公共 data ,数据有了,但是,调试将会变为噩梦。任何时间,...


    一、存在即合理



    1. Store

      当我们在使用 vue 时,同一个数据可能需要被多处复用,于是你选择创建了一个公共 data ,数据解决了,但是,调试将会变为噩梦,任何时间,我们应用中的任何部分,在任何数据改变后,都不会留下变更过的记录。为了解决这种问题,Store 由此诞生,我们将这个公共 data 放进 Store 中同一管理,当出现错误时,Store 告诉你哪里出错了。

    // 在 vue 项目文件中的 main.js 
    // Tip:建议在store文件中写store代码,main文件创建vue实例,本文为了方便,写到一块
    import Vuex from 'vuex'
    
    Vue.use(vuex);
    
    const store = new Vuex.store({
      state: {
        nickName: "",
        cartCount: 0  
      },
      mutations: {
        updateUserInfo(state,nickName) {
          state.nickName = nickName;
        },
        updateCartCount(state,cartCount) {
          state.cartCount += cartCount;
        }
      },
       actions: {
    	   updateUserInfo(context) {
    	      context.commit("updateUserInfo");
    	   },
    	   updateCartCount(context) {
    	      context.commit("updateCartCount");
    	   }
     }
    })
    // 新建 Vue 实例
    new Vue({
      el: "#app",
      store,
      router,
      template: '<App/>',
      components: {App}
    })
    
    • Tip:

      Store 中 state 存放公共 data ,而 state 的变更,通过 Store 自身的 action 管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生,以及它们是如何被触发。当错误出现时,会生成 log 记录 bug 之前发生了什么。

    2. Action 两种状态管理方式 dispatch && commit

    dispatch 异步管理用于异步提交、修改数据,例如:我们的图片、视频等资源较大的数据,加载时无法快速渲染完成,此时就需要用异步等待一点一点加载,同时还能进行一些别的“骚操作”,何乐而不为;

    commit 同步管理:同步加载,事要一件件做,不急也不慌。**



    二、dispatch


    1. dispatch 使用

    // 在我们自定义的组件中使用(结合上文的 Store 实例)
    methods: {
      increment(){
        this.$store.dispatch("updateUserInfo", 'nick'); 
      },
      decrement() {
        this.$store.dispatch("updateCartCount", 1); 
      }
     }
    


    三、commit


    1. commit 操作

    // 在我们自定义的组件中使用(结合上文的 Store 实例)
    methods: {
      increment(){
        this.$store.commit("increment", 'nick'); 
      },
      decrement() {
      	this.$store.commit("decrement", 1);
      }
     }
    
    展开全文
  • vue store存储commit 和dispatch

    万次阅读 2018-07-17 16:00:42
    this.$store.commit('toShowLoginDialog', true); this.$store.dispatch('...dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值) commit:同步操作,写法:this....
    this.$store.commit('toShowLoginDialog', true);
    this.$store.dispatch('toShowLoginDialog',false)

     

    主要区别是:

    dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值)

    commit:同步操作,写法:this.$store.commit('mutations方法名',值)

    展开全文
  • vue2组件通信-使用dispatch和broadcast 最近在使用Element过程中发现组件通信大量使用dispatch和broadcast两个方法,之前在vue2 组件通信也提到过 vue2 中取消了$dispatch和$broadcast两个重要的事件,而 Element ...

    vue2组件通信-使用dispatch和broadcast

    最近在使用 Element 过程中发现组件通信大量使用 dispatch 和 broadcast 两个方法,之前在 vue2 组件通信 也提到过 vue2 中取消了 $dispatch 和 $broadcast 两个重要的事件,而 Element 重新实现了这两个函数。

    代码地址放在 element-ui/lib/mixins/emitter

    emitter.js

    "use strict";
    exports.__esModule = true;
    function _broadcast(componentName, eventName, params) {
      this.$children.forEach(function (child) {
        var name = child.$options.componentName;
        if (name === componentName) {
          child.$emit.apply(child, [eventName].concat(params));
        } else {
          _broadcast.apply(child, [componentName, eventName].concat([params]));
        }
      });
    }
    exports.default = {
      methods: {
        dispatch: function dispatch(componentName, eventName, params) {
          var parent = this.$parent || this.$root;
          var name = parent.$options.componentName;
          while (parent && (!name || name !== componentName)) {
            parent = parent.$parent;
            if (parent) {
              name = parent.$options.componentName;
            }
          }
          if (parent) {
            parent.$emit.apply(parent, [eventName].concat(params));
          }
        },
        broadcast: function broadcast(componentName, eventName, params) {
          _broadcast.call(this, componentName, eventName, params);
        }
      }
    };

    解析

    dispatch 和 broadcast 方法都需要 3 个参数,componentName 组件名称, eventName 事件名称, params 传递的参数。

    dispatch 方法会寻找所有的父组件,直到找到名称为 componentName 的组件,调用其 $emit()事件。broadcast 方法则是遍历当前组件的所有子组件,找到名称为 componentName 的子组件,然后调用其 $emit() 事件。

    这里也看出了 Element 中的 dispatch 与 broadcast 的不同,vue1 中的 $dispatch 和 $broadcast 会将事件通知给所有的 父/子 组件,只要其监听了相关事件,都能够(能够,不是一定)触发;而 Element 则更像是定向爆破,指哪打哪,其实更符合我们日常的需求。

    使用方式

    兄弟组件之间的通信可以很好的诠释上述两个事件。假设父组件 App.vue 中引入了两个子组件 Hello.vue 和 Fuck.vue
    如果你的项目中巧合使用了 Element,那可以按照下面的方式将其引入进来,如果没有用 Element 也不用担心,复制上面的 emitter.js,通过 mixins 的方式引入即可。

    在 App.vue 中监听 message 事件,收到事件后,通过 broadcast 和接收到的参数,将事件定向传播给相关组件。

    <template>
      <div id="app">
        <hello></hello>
        <fuck></fuck>
      </div>
    </template>
    <script>
      import Hello from 'components/Hello'
      import Fuck from 'components/Fuck'
      import Emitter from 'element-ui/lib/mixins/emitter'
      export default {
        name: 'app',
        componentName: 'ROOT',
        mixins: [Emitter],
        components: {
          Hello,
          Fuck
        },
        created () {
          this.$on('message', params => {
            this.broadcast(params.componentName, params.eventName, params.text)
          })
        }
      }
    </script>

    Fuck.vue 与 Hello.vue 的内容基本相同,下面只列出 Fuck.vue

    import Emitter from 'element-ui/lib/mixins/emitter'
    import event from 'mixins/event'
    export default {
      componentName: 'Fuck',
      mixins: [Emitter, event],
      data () {
        return {
          name: 'Fuck',
          textarea: '',
          tableData: []
        }
      },
      methods: {
        submit () {
          this.communicate('message', {
            componentName: 'Hello',
            text: this.textarea
          })
          this.textarea = ''
        }
      },
      created () {
        this.$on('message', text => {
          this.tableData.push(this.getMessage(text))
        })
      }
    }

    mixins/event.js

    import Emitter from 'element-ui/lib/mixins/emitter'
    export default {
      mixins: [Emitter],
      methods: {
        communicate (event, params = {}) {
          this.dispatch('ROOT', event, Object.assign({
            eventName: event
          }, params))
        }
      }
    }

    Fuck.vue 中监听了 message 事件,当收到消息时,向 tableData 中加入新的值。而 summit 方法则调用 event.js 中的 communicate 方法,通过 dispatch 方法将事件传播给 ROOT 组件。

    完整代码地址

    vue 组件通信方式总结

    1. 父组件向子组件传递信息使用 props down
    2. 子组件向父组件传递信息使用 event up
    3. 其它关系类型组件通信使用 global event bus
    4. 大型 SPA 组件之间通信使用 Vuex 管理组件状态
    5. 使用 Element 下 emitter.js 中的 dispatch 和 broadcast 做事件定向传播
    展开全文
  • Electron-vue中vuex dispatch没反应 最近在用Electron-vue写一个客户端时,发现vuex的dispatch触发没反应,console也没报错,这就很蛋疼。 翻了翻官方文档,解决方法如下(原因就不多说了,管用就行!) 在/src/main...

    Electron-vue中vuex dispatch没反应


    最近在用Electron-vue写一个客户端时,发现vuex的dispatch触发没反应,console也没报错,这就很蛋疼。

    翻了翻官方文档,解决方法如下(原因就不多说了,管用就行!)

    在/src/main/index.js里面加上一行代码:

    import '../renderer/store'
    

    效果如下图(路径可能因人而异,基本都是这个路径。):
    在这里插入图片描述

    然后…就没有然后了,就OK了。

    展开全文
  • vuex 的 dispatch 和 commit 的区别 vue

    万次阅读 2018-09-19 14:52:02
    Vue.use(vuex); const store = new Vuex.store({  state: {  nickName: "",  cartCount: 0   },  mutations: {  updateUserInfo(state,nickName) {  state.nickName = nickName;  }, ...
  • this.$store.commit('toShowLoginDialog', true);...dispatch:含有异步操作,例如向后台提交数据,写法: this.store.dispatch(′mutations方法名′,值)commit:同步操作,写法:this.store.disp...
  • 主要给大家介绍了关于Vue中情侣属性$dispatch和$broadcast的相关资料,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • Vue.prototype.$dispatch=function (eventName,componentName,value){ let parent=this.$parent; while(parent){ if(parent.$options.name===componentName){ parent.$emit(eventName,value); return } .
  • vuedispatch与commit使用

    千次阅读 2020-10-12 10:40:16
    dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值) commit:同步操作,写法:this.$store.commit('mutations方法名',值)
  • Vue dispatch的基本用法

    2021-11-08 13:33:11
    vue dispatch用法_Vuex基本用法_weixin_39549936的博客-CSDN博客
  • 这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don’t use direct commit’s, use dispatch instead of this. 问题。 先允许我梳理一下目录结构,以便阅读的时候...
  • Vue组件之$dispatch和$broadcast

    千次阅读 2019-06-11 15:56:21
    $ dispatch 主要是事件流由当前组件往父组件流动,当满足一定条件的时候就会触发当前子组件的监听事件,$broadcast 的功能是事件流由当前组件向子组件流动,当满足一定条件的时候就会触发当前子组件的监听事件。...
  • Vue $dispatch 和 $broadcast 详解

    千次阅读 2019-03-06 14:14:28
    00 前言 $dispatch 和 $broadcast 作为一对情侣
  • vue 1.0 中,$dispatch 和 $broadcast作为一对情侣属性,主要用来实现基于组件树结构的事件通信。 $dispatch解析 dispatch是一个事件,首先会在自己实例本身上触发,然后沿父链向上传播。当它触发父组件上的事件...
  • 作者:小小沧海 ...本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段...最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了broadcast和dispatch方法,而Element使用的是Vue2.0版本,众...
  • 广播与派发适用于有祖先关系的组件间通信,原理是通过遍历组件树,用组件名(或者其它组件唯一标识)定位到对应的组件,并在找到的组件实例中调用... 在vue中我们可以通过this.$parent获取父组件,this.$children获取...
  • vue store存储commit 和dispatch的区别

    万次阅读 2018-12-27 16:31:04
    dispatch:含有异步操作, 存储: this.$store.dispatch('setTargetUser',friend); 取值: this.$store.getters.targetUser; commit:同步操作, 存储: this.$store.commit('setTargetUser',friend); 取值:...
  • goods.vue组件: 在methods添加cartAdd函数 监听v-on:cart-add="cartAdd", 购物车组件如果提交了'cart-add'事件就调用这个cartAdd函数; 对应cartcontrol.vue中methods下的addCart()函数里的: this.$...
  • 这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题。 先允许我梳理一下目录结构,以便阅读的时候...
  • 在做Vue.js高仿饿了么项目中,由于我用的Vue是2.0版本的,events和$dispatch已经被废弃了。 在实现购物车小球动画功能中,通过子组件cartcontrol.vue的addCart()里,用this.$dispatch('cart-add',event.target)方法...
  • Vue.prototype.$dispatch = function (eventName, value) { let parent = this.$parent while (parent) { parent.$emit(eventName, value) parent = parent.$parent } } 从下向上通知: 把孙子级组件里面的...
  • 主要介绍了详解vuex中action何时完成以及如何正确调用dispatch的思考,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • dispatch: 含有异步操作 存储: this.$store.dispatch('initUserInfo',friend); 取值: this.$store.getters.userInfo; commit:同步操作 存储: this.$store.commit('initUserInfo',friend); 取值: this.$store....
  • dispatch: 含有异步操作 存储: this.$store.dispatch('initUserInfo',friend); 取值: this.$store.getters.userInfo; commit:同步操作 存储: this.$store.commit('initUserInfo',friend); 取值: this.$store....
  • 对于父子(含跨级)传递数据的通信方式,Vue.js 并没有提供原生的 API 来支持,而是推荐使用大型数据状态...那么 $dispatch 和 $broadcast 到底是怎么工作,其底层又是怎么实现的呢?接下来,我们就详细的说一说! 01

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,061
精华内容 7,624
关键字:

dispatchvue

vue 订阅