vuex中store的action和mutations用法

目录
  • action和mutations (this.$store.dispatch和this.$store.commit)区别
  • 用法
    • dispatch: 含有异步操作
    • commit:同步操作
  • 实例
  • action和mutation分别用来处理什么？

action和mutations (this.$store.dispatch和this.$store.commit)区别

都是调用vuex中的方法。一个异步一个同步

  • dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
  • commit：同步操作，写法：this.$store.commit('mutations方法名',值)

action:

1、用于通过提交mutation改变数据

2、会默认将自身封装为一个Promise

3、可以包含任意的异步操作

mutations:

1、通过提交commit改变数据

2、只是一个单纯的函数

3、不要使用异步操作，异步操作会导致变量不能追踪。也就是说，用action中的函数调用mutations中的函数，进行异步操作state中的数据

用法

dispatch: 含有异步操作

存储：

this.$store.dispatch('initUserInfo',friend);

取值：

this.$store.getters.userInfo;

commit:同步操作

存储：

this.$store.commit('initUserInfo',friend);

取值：

this.$store.state.userInfo;

实例

1、login.vue

2、user.js

3、login.js

action和mutation分别用来处理什么？

  • action处理异步数据最终提交到数据库
  • mutation用来同步数据做业务的处理 (vuex中store数据改变唯一的方法就是mutation)
  • Action提交的是 mutation，而不是直接变更状态。

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

赞 (0)

相关推荐

  • Vuex中mutations与actions的区别详解

    区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用 devtools 追踪状态变化. 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步竞态怎么处理那是用户自己的事情. vuex 真正限制你的只有 mutation 必须是同步的这一点(在 redux 里面就好像 reducer 必须同步返回下一个状态一样).同步的意义在于这样每一个 mutation 执

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

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

  • 浅谈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 actions和mutation的异曲同工

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

  • vuex中store的action和mutations用法

    vuex中store的action和mutations用法

    目录 action和mutations (this.$store.dispatch和this.$store.commit)区别 用法 dispatch: 含有异步操作 commit:同步操作 实例 action和mutation分别用来处理什么? action和mutations (this.$store.dispatch和this.$store.commit)区别 都是调用vuex中的方法.一个异步一个同步 dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.d

  • vuex中store存储store.commit和store.dispatch的用法

    代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式: // 以载荷形式 store.commit('increment',{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 store.commit({ type: 'increment', amount: 10 //这是额外的参数 }) 主要区别: dispatch:含有异步操作,数

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

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

  • 对vuex中store和$store的区别说明

    这里写自定义目录标题 <router-link to="/login">{{ $store.state.userName }}</router-link> <router-link to="/login">{{ store.state.userName }}</router-link> <router-link to="/login">{{ this.store.state.userNa

  • 浅谈vuex中store的命名空间

    为了防止store变的过于臃肿,我们可以为store注册模块,模块默认是属于全局命名空间的,也就是说当用下列代码分发action时,任意模块只要action中有addNews,就会得到执行 this.$store.dispatch('addNews') 有时候这种情况会不是我们想要的,为此我们可以为模块指定命名空间,相当于把它封装起来,这样在像上面那样分发action,具有命名空间的模块中的addNews函数就不会执行 当然你也可以指定位于特定的命名空间中的模块执行addNews这个函数,方法如

  • vuex中store存储store.commit和store.dispatch的区别及说明

    目录 store存储store.commit和store.dispatch区别 主要区别 vuex store原理及使用指南 使用 安装 示例需求场景 源码目录结构 store组件初始化 store存储store.commit和store.dispatch区别 代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式: // 以载荷形式 store.commit('incr

  • vuex中store.commit和store.dispatch的区别及使用方法

    目录 store.commit和store.dispatch的区别及使用 规范的使用方式 主要区别 this.$store.dispatch() 与 this.$store.commit() 总结 store.commit和store.dispatch的区别及使用 代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式 // 以载荷形式 store.commit('inc

  • Vuex中的Mutations的具体使用方法

    在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离. Mutations使用 Vuex 中的 mutations 非常类似于事件,每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似.先注册事件,当触发响

  • Vuex中actions的使用教程详解

    Vuex中actions的使用教程详解

    目录 简介 说明 官网 actions概述 说明 特点 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:actions. 官网 Action | Vuex API 参考 | Vuex actions概述 说明 Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数. 特点 1.异步操作,通过m

  • Vuex中实现数据状态查询与更改

    在vuex进行vue注入后即可在任一子组件中通过this.$store来访问vuex import store from './store' new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) 1.在子组件中通过this.$store.state.变量名在子组件中访问state中某个变量的值 this.tabbarActive = this.$store.state.tabbarActi

随机推荐