vuex mutation action同级调用方式

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

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。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex实现像调用模板方法一样调用Mutations方法

    我们在写vue项目中如果,我们发现vuex中<button @click="$store.commit('jia')">-</button>是十分麻烦的,我们想直接写成@click中的jia,我们应该如何处理? 我们可以想一想我们在解决state时是如何解决的,为此我们将介绍一个与解决state相同方案 第一步在我们自己创建模板a.vue里引入我们的mapMutations 代码如下: import {mapState,mapMutations} from 'v

  • 浅谈vuex之mutation和action的基本使用

    浅谈vuex之mutation和action的基本使用

    我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1 一.mutation 在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,c

  • vuex 多模块时 模块内部的mutation和action的调用方式

    vue在做大型项目时,会用到多状态管理,vuex允许我们将store分割成多个模块,每个模块内都有自己的state.mutation.action.getter.模块内还可以继续嵌套相对应的子模块. 为了巩固我自己对store多模块的一些基本认识,写了个简单的多模块实例,下图为我自己创建的store的目录结构,modules文件夹内的模块,在实际项目中还可以继续分开类似store目录下的多文件结构,也就是单独的模块文件夹,方便后期修改. store目录结构 ./store/index.js的代码

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

    前言 在vuex中提交 mutation 是更改状态的唯一方法,并且这个过程是同步的,异步逻辑都应该封装到 action 里面.对于mutation/action,有一个常见的操作就是传参,也就是官网上说的"提交载荷". 这里是关于如何在vue-cli中使用vuex的方法,我们采用将vuex设置分割成不同模块的方法.其中,state模块中配置如下 //vuex中的state const state = { count: 0 } export default state; mutatio

  • 浅谈vuex actions和mutation的异曲同工

    vuex说明: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 包含的内容: state:驱动应用的数据源: view:以生命方式将state映射到视图: actions:响应在view上的用户输入导致的状态变化: 流程示意图 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 多个视图依赖于同一状态. 来自不同视图的行为需要变更同一状态. 对于问题一,传参的方法

  • vuex mutation action同级调用方式

    目录 mutation action同级调用 mutation和action区别 1.流程顺序 2.角色定位 3.限制 mutation action同级调用 mutatiion同级调用:this.commit action同级调用:this.dispatch // 同步 const mutations = { add(state, payload) { state.countB += 10 }, plus(state, payload) { this.commit('add') } } //

  • 详解vuex中action何时完成以及如何正确调用dispatch的思考

    在项目中遇到关于action与dispatch使用的一些细节问题,经过搜索得到了一些答案. 特意在此提出,如有错误还请指出,十分感谢- 问题1:如果action是异步的,那么怎么知道它什么时候完成?在vuex的官网给出了答案: 注:如果需要通过组合多个action来完成某些逻辑,用async/await会更简单一点 问题2: 如果action是同步的,就不需要等待它完成了吗? 其实这个问题相当于在w:dispatch('some action')是一个同步函数还是异步函数. 如果dispatch

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

  • Struts2学习笔记(3)-DMI动态调用方式

    什么是DMI?DMI即所谓的动态方法调用. Action在执行的时候并不一定要执行execute方法,可以在配置文件中配置Action的时候用method=来指定执行哪个方法,也可以在url地址中动态指定(动态方法调用DMI). 第一种方式,在struts.xml中对Action添加method: 复制代码 代码如下: <struts>     <constant name="struts.devMode" value="true" />  

  • PHP验证码类文件及调用方式代码详解

    PHP验证码类文件及调用方式代码详解

    代码如下所示: //验证码类 class ValidateCode { private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';//随机因子 private $code;//验证码 private $codelen = 4;//验证码长度 private $width = 130;//宽度 private $height = 50;//高度 private $img;//图形资源句柄 private $fon

  • Android AIDL实现与服务相互调用方式

    通过AIDL接口在进程间传递数据,记录在开发中遇到的一写问题 AIDL支持数据类型如下: 1. Java 的原生类型 2. String 和CharSequence 3. List 和 Map ,List和Map 对象的元素必须是AIDL支持的数据类型: 以上三种类型都不需要导入(import) 4. AIDL 自动生成的接口 需要导入(import) 5. 实现android.os.Parcelable 接口的类. 需要导入(import). 问题1 在传递非基础数据时 在参数前需加修饰符 v

  • 在java中由类名和方法名字符串实现其调用方式

    js里通过eval()函数,在知道某个方法名是可以实现调用该方法,那么在java里边又怎么实现的呢? java里边是通过反射机制来实现,代码如下: import java.lang.reflect.Method; public class Test { public static void main(String[] args) throws Exception { String className = "com.runqianapp.ngr.alias.example.FunClass&quo

  • Vuex unknown action type报错问题及解决

    目录 Vuex unknown action type报错 vuex unknown action type:*** 总结 Vuex unknown action type报错 在项目中使用到vuex,因为都是用的模块开发,目录如下 模块代码 原来使用代码 各种查找问题都不好使,完了再方法之前加上模块名称就ok了 vuex unknown action type:*** vuex 分模块后使用mapActions调用action老是提示 [vuex] unknown action type:**

随机推荐