脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vuex mutation/action的传参

详解vuex中mutation/action的传参方式

 更新时间：2018年08月07日 14:19:53   作者：wopelo  
这篇文章主要介绍了详解vuex中mutation/action的传参方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言

在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。

这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下

//vuex中的state
const state = {
  count: 0
}

export default state;

mutation传参

朴实无华的方式

mutation.js

//vuex中的mutation
const mutations = {
  increment: (state,n) => {
    //n是从组件中传来的参数
    state.count += n;
  }
}

export default mutations;

vue组件中（省去其他代码）

methods: {
  add(){
    //传参
    this.$store.commit('increment',5);
  }
}

对象风格提交参数

mutation.js

//vuex中的mutation
const mutations = {
  decrementa: (state,payload) => {
    state.count -= payload.amount;
  }
}

export default mutations;

vue组件

methods: {
  reducea(){
    //对象风格传参
    this.$store.commit({
      type: 'decrementa',
      amount: 5
    });
  },
}

action传参

朴实无华

action.js

/vuex中的action
const actions = {
  increment(context,args){
    context.commit('increment',args);
  }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations = {
  increment: (state,n) => {
    state.count += n;
  }
}

export default mutations;

vue组件

methods: {
  adda(){
    //触发action
    this.$store.dispatch('increment',5);
  }
}

对象风格

action.js

//vuex中的action
const actions = {
  decrementa(context,payload){
    context.commit('decrementa',payload);
  }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations = {
  decrementa: (state,payload) => {
    state.count -= payload.amount;
  }
}

export default mutations;

vue组件

methods: {
  reduceb(){
    this.$store.dispatch({
      type: 'decrementa',
      amount: 5
    });
  }
}

action的异步操作

突然就想总结一下action的异步操作。。。。

返回promise

action.js

//vuex中的action
const actions = {
  asyncMul(context,payload){
    //返回promise给触发的store.dispatch
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit('multiplication',payload);
        resolve("async over");
      },2000);
    });
  }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vue组件

methods: {
  asyncMul(){
    let amount = {
      type: 'asyncMul',
      amount: 5
    }
    this.$store.dispatch(amount).then((result) => {
      console.log(result);
    });
  }
}

在另外一个 action 中组合action

action.js

//vuex中的action
const actions = {
  asyncMul(context,payload){
    //返回promise给触发的store.dispatch
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit('multiplication',payload);
        resolve("async over");
      },2000);
    });
  },
  actiona({dispatch,commit},payload){
    return dispatch('asyncMul',payload).then(() => {
      commit('multiplication',payload);
      return "async over";
    })
  }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vue组件

methods: {
  actiona(){
    let amount = {
      type: 'actiona',
      amount: 5
    }
    this.$store.dispatch(amount).then((result) => {
      console.log(result);
    });
  }
}

使用async函数

action.js

//vuex中的action
const actions = {
  asyncMul(context,payload){
    //返回promise给触发的store.dispatch
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit('multiplication',payload);
        resolve("async over");
      },2000);
    });
  },
  async actionb({dispatch,commit},payload){
    await dispatch('asyncMul',payload);
    commit('multiplication',payload);
  }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vue组件

methods: {
  actionb(){
    let amount = {
      type: 'actionb',
      amount: 5
    }
    this.$store.dispatch(amount).then(() => {
      ...
    });
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue判断input输入内容全是空格的方法

    vue判断input输入内容全是空格的方法

    下面小编就为大家分享一篇vue判断input输入内容全是空格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-04-04
  • 解决vue项目中某一页面不想引用公共组件app.vue的问题

    解决vue项目中某一页面不想引用公共组件app.vue的问题

    这篇文章主要介绍了解决vue项目中某一页面不想引用公共组件app.vue的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue图片裁剪插件vue-cropper使用方法详解

    vue图片裁剪插件vue-cropper使用方法详解

    这篇文章主要为大家详细介绍了vue图片裁剪插件vue-cropper使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vue-router的beforeRouteUpdate不触发问题

    vue-router的beforeRouteUpdate不触发问题

    这篇文章主要介绍了vue-router的beforeRouteUpdate不触发问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue中使用setTimeout问题

    Vue中使用setTimeout问题

    这篇文章主要介绍了Vue中使用setTimeout问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • Vue中import与@import的区别及使用场景说明

    Vue中import与@import的区别及使用场景说明

    这篇文章主要介绍了Vue中import与@import的区别及使用场景说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • vue项目使用js监听浏览器关闭、刷新及后退事件的方法

    vue项目使用js监听浏览器关闭、刷新及后退事件的方法

    这篇文章主要给大家介绍了关于vue项目使用js监听浏览器关闭、刷新及后退事件的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue使用websocket概念及示例

    vue使用websocket概念及示例

    这篇文章主要为大家介绍了vue使用websocket概念及示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • 详解在vue中如何实现屏幕录制与直播推流功能

    详解在vue中如何实现屏幕录制与直播推流功能

    屏幕录制和直播推流是现代Web应用中常用的功能,Vue作为一种流行的JavaScript框架,提供了一些工具和库,可以方便地实现屏幕录制和直播推流功能,本文将介绍如何在Vue中进行屏幕录制和直播推流,需要的朋友可以参考下
    2024-01-01

最新评论