導(dǎo)言： 本菜雞在學(xué)習(xí)大佬的代碼的時候看到有大佬在Vuex中的Actions用到了解構(gòu)賦值。我對Actions和解構(gòu)賦值都不算太了解。這篇文章就記錄一下我對這兩點的一個理解。

Actions背景介紹

背景： mutation中是存放處理數(shù)據(jù)的方法的集合，我們使用的時候需要commit。但是commit是同步函數(shù)，而且只能是同步執(zhí)行。那我們想一步操作怎么辦？

作用： 在actions中提交mutation，并且可以包含任何的異步操作。actions可以理解為通過將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡單的說就是異步操作數(shù)據(jù)（但是還是通過mutation來操作，因為只有它能操作）

Actions的用法：

• 定義actions：

const store = new Vuex.Store({//創(chuàng)建store實例state: {count: 0},mutations: { increment (state) {state.count++}},actions: { //只是提交`commit`了`mutations`里面的方法。increment (context) {context.commit('increment')}}})一般我們會簡寫成這樣actions: {increment ({ commit }) {commit('increment')}}

• 分發(fā)actions：

store.dispatch('increment')

看到如上代碼問題來了，為什么簡寫的時候可以寫成{ commit }的形式？

解構(gòu)賦值

解構(gòu)賦值語法是一種 Javascript 表達(dá)式。通過解構(gòu)賦值, 可以將屬性/值從對象/數(shù)組中取出,賦值給其他變量。

我們先來舉一個關(guān)于對象的解構(gòu)賦值的例子：

let jsonData = {id: 42,status: "OK",data: [867, 5309] };let { id, status, data: number } = jsonData;console.log(id, status, number); // 42, "OK", [867, 5309]

由此可以引申，在模塊導(dǎo)入時也使用解構(gòu)賦值的辦法（這樣就可以指定需要導(dǎo)入模塊中的哪些方法了）：

const { SourceMapConsumer, SourceNode } = require("source-map"); // 導(dǎo)入react組件 import {ReactComponent} from './xxxComponent.jsx';

我們再向前引申一層，為什么可以傳入commit，是因為通過解構(gòu)賦值或者稱為參數(shù)結(jié)構(gòu)的辦法，將context對象解構(gòu)了。

如圖所示，我們可以看到context對象下面有一個commit方法：

所以可以直接傳入commit而不用寫成context.commit的形式。事實上，文章最開始的代碼中寫成如下形式也不會報錯：

actions: {increment ({ commit, dispatch }) {commit('increment')}}

我們通過參數(shù)解構(gòu)的辦法也可以傳入dispatch方法。另外額外說一句，從最開始的代碼中，為什么context和store看起來十分相似，好像具有相同的屬性和方法，在官方文檔中是這么說的：

Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象。因此你可以調(diào)用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

參考資料

[1] Vuex之理解Actions
[2] 解構(gòu)賦值
[3] ES6 對象的解構(gòu)賦值
[4] Action

總結(jié)

以上是生活随笔為你收集整理的从Vuex的Actions中理解JavaScript的解构赋值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。