Vuex mutitons和actions初使用详解

Mutations

mutations 必须是同步函数,为什么?

举个例子:  官方案例

mutations: {
 someMutation (state) {
  api.callAsyncMethod(() => {
   state.count++
  })
 }
}

我们都知道任何回调函数中进行的状态改变都是无法追踪的,  devtools会对mutations的每一条提交做记录,记录上一次提交之前和提交之后的状态,在上面的例子中无法实现捕捉状态,因为在执行mutations时,内部回调函数还没有执行,

所以此时无法捕捉状态.

再简单来讲,就像大家都吃过核桃,核桃刚产下来的时候是带一层绿色的皮的,我们需要将绿色烧掉,弄掉了,才是我们在市场上见到的只有外面硬壳的核桃,如果我们只剥去绿皮,是不能直接吃的,因为还有一层壳胡着呢.

Actions

vuex肯定不甘示弱,为了解决mutations只有同步的问题,提出了actions(异步),专门用来解决mutations只有同步无异步的问题.

1. 首先先了解一下actions

(1).MUTATIONS

const state = {
　　　　xxx: null
　　},
　　const mutations = {
　　　　[setState](state, value) {
　　　　　　state.xxx = value
　　　　}
　　}

此处value可以是对象,可以是值等

组件调用方式: this.$store.commit('setState', [value])

(2).ACTIONS

　　// 第一种写法简写形式
　　const actions = {
　　　　[addPlus]({commit}) { // 简写方式,待研究
　　　　　　commit('[setState]', value)
　　　　　　//此处value可以是对象,可以是固定值等
　　　　}
　　}
　　// 第二种形式
　　const actions = {
　　　　[addPlus](context) {
　　　　　　//context 官方给出的指定对象, 此处context可以理解为store对象
　　　　　　context.commit('[setState]', value)
　　　　}
　　}
　　/* 两处的commit都是提交的mutations中的字符串的事件类型名称,对应会调用mutations中的回调函数 */
　　actions在组件中的调用方式:
　　import mapActions from 'vuex'
　　methods: {
　　　　...mapActions: ([
　　　　　'addPlus'　
　　　　]),
　　　　setAddPlus () {
　　　　　　this.$store.dispatch('addPlus', [value]) // 异步调用mutations
　　　　}
　　}

Vuex 状态管理

Vuex 依赖于 Vue 用来管理 Vue 项目状态

状态的修改依赖于 commit 和 dispatch

import Vue from 'Vue';
import Vuex from 'Vuex';

export default new Vuex.Store({
  state:{
    count:100
  },
  mutations:{
    change(state,payload){
      state.count += payload;
    }
  },
  actions:{
    change(context,palyload){
      context.commit('change',palyload);// 异步触发 mutaiton
    }
  },
  getters:{
    getCount(){
      return state.count;
    }
  }
})
{{$store.state.count}}
<button @click="commitChange">更改count</button>
<button @click="dispatchChange">更改count</button>

...

methods:{
  commitChange(){
    this.$store.commit('change',1);
  },
  dispatchChange(){
    this.$sotre.dispatch('change',10);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简单的应用:这是一些简单的vue的小组件方法: http://www.jb51.net/article/138230.htm) 何为四大金刚? 1.State (这里可以是 小写的 state,跟官网保持一致,采用大写,因为个人习惯,后面的代码介绍采用小写) vuex的状态管理,需要依赖

  • vuex学习之Actions的用法详解

    Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的. 沿用vuex学习---简介的案例:这里是加10 减1 1.在store.js 中 代码为: import Vue from 'vue' import Vuex from 'vuex' //使用vuex模块 Vue.use(Vuex); //声明静态常量为4 const state = { count : 4 }; const mu

  • 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

  • Vuex中mutations与actions的区别详解

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

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

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

  • vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法

    在store.js里面添加如下的代码就可以了: // 热重载 if (module.hot) { // 指定要监控的文件 module.hot.accept(['./mutations'], () => { const mutations = require('./mutations').default // Vuex 提供的热重载接口 store.hotUpdate({ mutations }) }) } 以上这篇vue-cli整合vuex的时候,修改actions和mutations,实现热

  • vuex2中使用mapGetters/mapActions报错的解决方法

    解决方案 可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread . 接着在babel的配置文件 .babelrc 中应用插件: { "presets": [ ["es2015", { "modules": false }] ], "plugins": ["transform-object

  • vuex actions传递多参数的处理方法

    场景 在使用vue components dispatch Vuex actions的时候需要传递参数给多个参数actions 但是在actions 只是可以接收到两个参数的问题 分析 vuex actions 固定接受的第一个参数是dispatch对象 第二个参数是使用者本身定制的参数 参考 `https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment`

  • Vuex mutitons和actions初使用详解

    Mutations mutations 必须是同步函数,为什么? 举个例子:  官方案例 mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } } 我们都知道任何回调函数中进行的状态改变都是无法追踪的,  devtools会对mutations的每一条提交做记录,记录上一次提交之前和提交之后的状态,在上面的例子中无法实现捕捉状态,因为在执行mutations时,内部回调函数还没有执行,

  • 对vuex中getters计算过滤操作详解

    getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的: getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • Vue+Vuex实现自动登录的知识点详解

    在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization 二.我们重新进入的时候,判断条件是只要有Authorization就可以直接进入了,但其实应该提交给服务器判断这个A

  • Vuex新手的理解与使用详解

    1 vuex的概念理解 提到vuex,就不能不先提vue. 我个人开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入改变时监听各种事件以改变页面逻辑数据.当然最早的时候,我们使用html内部的value来记载各种数据,但这种方式在今日看来就有些简单粗暴了,难以使用复杂的页面逻辑.这也正是我开始使用vue的初衷--数据双向绑定. 但对于vue而言

  • vue2.0+vuex+localStorage代办事项应用实现详解

    vue2.0+vuex+localStorage 待办事项源码:https://github.com/Mynameisfwk/vue-Todo-list 参考代码:https://github.com/Mynameisfwk/vivo-shop 代码预览 vuex官方文档 https://vuex.vuejs.org/ 我觉的官方文档说明很详细 localStorage 用来本地储存数据 const state={ home:localStorage["home"]?JSON.pars

  • Vuex的API文档说明详解

    概述 import Vuex from 'vuex' const store = new Vuex.Store({ ...options }) 构造器选项 state 类型: Object Vuex store 实例的根 state 对象 mutations 类型: { [type: string]: Function } 在 store 上注册 mutation,处理函数总是接受 state 作为第一个参数(如果定义在模块中,则为模块的局部状态),payload 作为第二个参数(可选) act

随机推荐