前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vuex中Action的解构赋值理解

Vuex中Action的解构赋值理解

作者头像
咪啪咪啪
发布2019-11-15 20:21:04
1.6K0
发布2019-11-15 20:21:04
举报
文章被收录于专栏:PHP-咪啪咪啪

在Vuex教程中有这样一段

Action Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
代码语言:javascript
复制
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

在actions这段代码下,稳当写到用es2015的结构方法对代码做了简化

代码语言:javascript
复制
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

在vuex的api中action的部分有这样一句话“处理函数总是接受 context 作为第一个参数,payload 作为第二个参数(可选)”。

image.png 你可以理解为action中的函数会默认自动获取context这个对象为第一个参数。 而context这个对象拥有和store相同的属性和方法,从图中可以看到。

所以这段解构实际上是这样的

代码语言:javascript
复制
{commit} = context   //context是自动获取的对象

上面这段代码怎么理解的,可以去看下es2015对象解构赋值这一块

对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。

代码语言:javascript
复制
// 例一
let { log, sin, cos } = Math;

// 例二
const { log } = console;
log('hello') // hello

上面代码的例一将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。例二将console.log赋值到log变量。

这样一来就很好理解了,因为context对象中有commit方法,所以直接解构了

本篇文章是个人理解,如果有错误希望能告知

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档