vuex中 mutation和action的区别和使用

utations 类似于事件,用于提交 Vuex 中的状态 state

action 和 mutations 也很类似,主要的区别在于mutations 只能是同步操作,,action 可以包含异步操作,而且可以通过 action 来提交 mutations

mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context,但是 context 是 state 的父级,包含 state、getters

Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法

分发调用action:

this.$store.dispatch(‘action中的函数名‘,发送到action中的数据)

在组件中提交 Mutation:
this.$store.commit(“mutation函数名”,发送到mutation中的数据)

在action中提交mutation :

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {    //官方给出的指定对象, 此处context可以理解为store对象
      context.commit('increment');
    }
  }
})
// 第一种写法简写形式
  const actions = {
    action的函数名({commit}) {
      commit(“mutation函数名”, value);   //调用mutation中的函数
      //此处value可以是对象,可以是固定值等
    }
  }
  // 第二种形式
  const actions = {
    action中的函数名(context) {
      //context 官方给出的指定对象, 此处context可以理解为store对象
      context.commit(“mutation函数名”, value);     //调用mutation中的函数
    }
  }

原文地址:https://www.cnblogs.com/panghu123/p/11747285.html

时间: 2024-10-09 03:06:30

vuex中 mutation和action的区别和使用的相关文章

JAVA中handleEvent和action的区别

看代码中用到了handleEvent和action,都是对事件进行处理的,觉得这两个方法可以直接合并,于是尝试合并后,发现功能还是有问题,说明两者还是有区别了,查了很久的资料,才基本了解这两者的区别. 发现网上对其资料比较少,但是查询了JDK_API1.6以后,发现这个方法已经被淘汰了,从JDK1.1开始,processEvent(AWTEvent)取代了HandleEvent, 而action从 JDK 1.1 开始,将此组件作为组件(激发动作事件)上的 ActionListener 来注册.

vuex中module的命名空间概念

vuex中module的命名空间概念 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的. 弊端1:不同模块中有相同命名的mutations.actions时,不同模块对同一 mutation 或 action 作出响应. 弊端2:当一个项目中store分了很多模块的时候,在使用辅助函数mapState.mapGetters.mapMutations.mapActions时,很难查询,引用的state.getters.mutations.action

vue.js的状态管理vuex中store的使用

一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

浅谈HTTP中Get与Post的区别_转

可参考:HTTP请求中POST与GET的区别 Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP中的GET,POST,PUT,DELETE就对应着对这个资源的查,改,增,删4个操作.到这里,大家应该有个大概的了解了,GET一般用于获取/查询资源信息,而POST一般用于更新资源信息. 1.根据HTTP规范,GET用于信息获取,而且应该是安全的和幂等的

jquery中attr和prop的区别分析

这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. 复制代码代

asp.net mvc4中model与Model的区别

@model模型定义 使用@model关键字可以定义一个Action里所对应的一个模型(经常可以叫他实体类), 其实是对动态变量进行实例化,这样就可以直接在cshtml文件中调用“Model”变量. 而这个模型的实例,需要通过Controller进行传输,如果没有则“Model”将为null. 模型可以是一个实体类,也可以是一个列表实例,字典对象都可以进行定义,但是和 Controller中的Action传回来的实例一定要一样,否则将会出现错误. Model 定义 MVC的第一个字母M是Mode

在表单(input)中id和name的区别

在表单(input)中id和name的区别  但是name在以下用途是不能替代的: 1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是全文档中唯一的.此外浏览器会根据name来设定发送到服务器的request.因此如果用id,服务器是无法得到数据的. 2. frame和window的名字,用于在其他frame或window指定target. 例如:<frameset cols="

&lt;s:form action=&quot;login&quot;...与&lt;s:form action = &quot;login.action&quot;.的区别

1.<s:form action="login" namespace="/login"> 它表示的是<form id="login" name="login" action="/Action/login/login.action" method="post"> 因为它使用了struts标签,后面会自动加.action,而且namespace会起作用 2.<s

Jquery学习笔记(6)--jquery中attr和prop的区别【精辟】

jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. <a href="http://www.baidu.com&quo