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。



原文地址:https://www.cnblogs.com/cuikaitong/p/9224549.html

时间: 2024-10-09 22:50:00

mutation和action区别的相关文章

vuex中 mutation和action的区别和使用

utations 类似于事件,用于提交 Vuex 中的状态 state action 和 mutations 也很类似,主要的区别在于mutations 只能是同步操作,,action 可以包含异步操作,而且可以通过 action 来提交 mutations mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象 action 也有一个固有参数 context,但是 context 是 state 的父级,包含 state.getters Vuex 的仓库是

vuex2.0 基本使用(2) --- mutation 和 action

1, mutation The only way to actually change state in a Vuex store is by committing a mutation, 在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去comit 一个mutation,

Html.ActionLink与Url.Action区别

一.@Html.ActionLink()概述 在MVC的Rasor视图引擎中,微软采用一种全新的方式来表示从前的超链接方式,它代替了从前的繁杂的超链接标签,让代码看起来更加简洁.通过浏览器依然会解析成传统的a标签.除此之外,还允许我们添加Html属性.下面来看看@Html.ActionLink()的使用方法吧. 二.@Html.ActionLink()的使用详解 1. @Html.ActionLink("linkText", "actionName") 这种重载的第

@Html.Partial和@Html.Action区别

1.首先看一下它们的对等关系 @Html.Partial 对应 @{Html.RenderPartial();}@Html.Action 对应 @{Html.RenderAction();} 以上相互对应的语句,它们实现的功能是一样的,不同的就是写法, 2.Action加载方法的视图,执行 Controller → Model → View 的顺序,然后把产生的页面带回到原来的View中再回传.而Partial直接加载视图文件内容 [email protected]可以直接提供用户控件名作为参数

Html.Partial,Html.RenderPartial Html.Action,Html.RenderAction区别

@Html.Partial,@Html.RenderPartial      这两者的共同点都是在视图中去调用另外一个视图,区别是   Html.Partial 有返回值 ( MvcHtmlString ),使用的时候  可以用一个变量存储这个返回值,或者使用 @直接进行输出. 而Html.RenderPartial  的返回值是 Void ,他的内部会自动帮我们 Response输出内容,所以无法用变量进行存储, 使用的时候 需要 @{ Html.RenderPartial() ;} 来调用

Spark的transformation 和 action的操作学习笔记

一.spark的transformation 和 action区别 Spark有一些基本的transformation 和 action的操作,其中transformation形成各类型的RDD,action不形成RDD,而是对RDD进行累加.合并.保存操作. 二.transformation 有哪些 transformation有map.filter.flatMap(与map不一样).Sample.groupByKey.ReduceByKey.Union.Join.cogroup.crossP

Vue:初次使用vueX

什么是vueX Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新. vueX的组成 主要分为三个部分: state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导致的状态变化. vueX使用场景 如果您不打

15.vue动画& vuex

Vue.config.productionTip = false; ==是否显示提示信息== ==import/export== export xxx 必须跟跟对象或者和定义一起 对象: export {xxxx} 定义:?export let a = xxx; ??? export function(){} --------------------------------- 引入: import modA from "./a" 错误 import {a} from "./a

Vue.js与React的全面对比

Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两个框架的认知. 1.数据绑定 1.1 Vue中有关数据绑定的部分 vue是双向绑定, Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.这是通过设置属性