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

Actions背景介紹

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

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

Actions的用法：

• 定義actions：

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

• 分發actions：

store.dispatch('increment')

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

解構賦值

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

我們先來舉一個關于對象的解構賦值的例子：

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

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

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

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

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

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

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

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

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

參考資料

[1] Vuex之理解Actions
[2] 解構賦值
[3] ES6 對象的解構賦值
[4] Action

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。