Vuex 核心屬性 中

2022-02-14 04:18:25 字數 1058 閱讀 6107

mutation同步函式:

在mutations 中 使用非同步操作的話,頁面上devtools工具無法跟蹤資訊。

所以在mutations中的方法必須是同步方法

action的基本定義

我們強調,不要再mutation中進行非同步操作,但再某些情況下,我們確實希望再vuex中使用非同步操作(網路請求等)

那麼我們就可以使用action了,action類似於mutation,但是是用來代替mutation進行非同步操作的,傳遞引數使用  payload

我們知道了,在mutation中我們只能通過commit(提交)的方式,那麼在action中呢?

在action中我們只能通過dispatch()來尋找action中的方法!

舉個例子:

在store檔案中的index.js檔案中

我們通過settime的方式模擬一下,通過action的非同步操作

//context ==> 定義的引數(注意,這裡最好就寫context) 上下文的意思 它等同於 store

actions:,1000)

})

根據以上**我們可以看到元件中使用vuex時,並且進行非同步操作時,先通過dispatch進入了action中,再action中處理了非同步之後,再進入mutation中

那麼關於action中傳參,我這有個例子:

actions:,1000)

})

}

//updinfo:我們定義的方法名

updinfo()

上面的是乙個單純的傳遞字串引數,那麼傳遞其他的引數,比如說需要**那麼該怎麼做呢?

在這裡我們就可以使用promise來進行處理。看下邊的例子:

actions:,1000)
})

})

}

//updinfo:我們定義的方法名

updinfo())

}

從上面那個例子裡面我們可以看到,通過promise,我們可以在action中發生請求的地方,.then。處理**

Vuex 核心屬性 下

modules 可以定義新的模組 官方上說,當我們的應用變的非常複雜時,store物件就有可能變得相當臃腫 為了解決這個問題,vuex允許我們將store分割成模組 module 在這裡,每個模組都擁有自己的state mutations actions getters等 寫個例子吧 首先我們來宣告...

Vuex核心屬性(上)

state 單一狀態樹 單一資料來源 主要是用來存放狀態的 如 count 0 getters 類似於單個元件裡面的計算屬性 mutations 狀態更新的唯一方式 commit mutations 主要分為2部分 1.字串的事件型別 increment state 在這裡面 increment 就...

Vuex的五個核心屬性及輔助函式

vuex是什麼?vuex是乙個專門為vue.js應用程式開發的狀態管理模式,它採用了集中式儲存和管理程式所有元件的狀態 主要包括幾個模組 state 儲存所有的變數 state是乙個物件 mutations 直接操作state中的資料 actions 只能呼叫mutations中的方法 getter...