广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vuex mutation action同级调用方式
  • 327
分享到

vuex mutation action同级调用方式

2024-04-02 19:04:59 327人浏览 独家记忆
摘要

目录mutation action同级调用mutation和action区别1、流程顺序2、角色定位3、限制mutation action同级调用 mutatiion同级调用:thi

mutation action同级调用

  • mutatiion同级调用:this.commit
  • action同级调用:this.dispatch
// 同步
const mutations = {
    add(state, payload) {
        state.countB += 10
    },
    plus(state, payload) {
        this.commit('add')
    }
}
// 异步(定时器等)
const actions = {
    addCountBAction({ state, commit }, payload) {
        commit('add', payload)
    },
    plusCountBToAAction({ state, commit, dispatch, getters, rootState, rootGetters }, payload) {
        // https://Vuex.vuejs.org/zh/api/#actions
         setTimeout(() => {
        		dispatch('addCountBAction')
         }, 2000);
        // 或者 thiis.dispatch('addCountBAction')
    }
}

mutation和action区别

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

1、流程顺序

“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。

2、角色定位

基于流程顺序,二者扮演不同的角色。

  • Mutation:专注于修改State,理论上是修改State的唯一途径。
  • Action:业务代码、异步请求。

3、限制

角色不同,二者有不同的限制。

  • Mutation:必须同步执行。
  • Action:可以异步,但不能直接操作State。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vuex mutation action同级调用方式

本文链接: https://www.lsjlt.com/news/144137.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vuex mutation action同级调用方式
    目录mutation action同级调用mutation和action区别1、流程顺序2、角色定位3、限制mutation action同级调用 mutatiion同级调用:thi...
    99+
    2022-11-13
  • vuex mutation action同级调用方式是什么
    本篇内容介绍了“vuex mutation action同级调用方式是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2023-06-29
  • Python同级目录(兄弟目录)调用方式
    目录同级目录(兄弟目录)调用详细解释开始上代码import同级目录报错同级目录(兄弟目录)调用 看书看得好好的,一写代码就出错!!! 这个问题是大家初学Python的时候会遇到的一个...
    99+
    2022-11-13
  • 浅谈C#中Action和Func回调的常用方式
    目录一、简介二、Action例1例2三、Func例1例2结束一、简介 Action和Func泛型委托实际上就是一个.NET Framework预定义的委托,3.5引入的特性。基本涵盖...
    99+
    2022-11-13
  • Vue中的同步调用和异步调用方式
    目录Vue的同步调用和异步调用Promise实现异步调用async /await方法实现同步调用Vue同步和异步的问题基本语法实例Vue的同步调用和异步调用 Promise实现异步调...
    99+
    2022-11-13
  • FeignClient实现接口调用方式(不同参数形式)
    目录FeignClient接口调用1、无参2、字符串参数3、对象参数feign接口参数遇到的bug服务接收方接口解决方案FeignClient接口调用 无参字符串参数对象参数 拟定客...
    99+
    2022-11-13
  • 浅析php中函数调用函数的不同方式
    在PHP中,函数调用可能是程序中最常用的操作之一。但是,当你需要一个函数调用另一个函数的时候,你需要了解一些细节。在本文中,我们将讨论PHP中函数调用函数的不同方式,以帮助你更好地理解这个过程。直接调用最基本的方式调用函数是直接在代码中调用...
    99+
    2023-05-14
    php 函数
  • Feign 集成 Hystrix实现不同的调用接口不同的设置方式
    问题描述 小编在写项目时遇到一个需求: 假设现在有三个项目A、B、C,其中A、B作为服务提供方,C作为调用方,需要实现C在调用A、B时实现不同的超时时间,比如C调用A时超时是2s,调...
    99+
    2022-11-12
  • Python基础篇(14):Python中不同类之间调用方法的四种方式
    一、子类使用继承关系,调用父类的方法实现 class A: def method_a(self): print("这是方法A")class B(A): def method_b(self): prin...
    99+
    2023-10-20
    python 开发语言
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作