Nuxt中如何使用Vuex-Store非同步獲取資料

我的糖呢發表於2019-03-03

Nuxt是一個基於Vue.js的通用型框架,它整合了使用Vue開發的絕大陣列件/框架。

長話短說如何在Vuex-store中獲取非同步資料呢?

在Nuxt中由於集合了Vuex還有其他的一些配置,大大的方便了我們使用Vuex;在Nuxt官方文件中寫到:

Nuxt中如何使用Vuex-Store非同步獲取資料

在這裡筆者為了方便使用了模組的方式去使用store;

1.1 首先現在store目錄下新建.js檔案,由於業務需求新建了幾個模組的.js檔案。

Nuxt中如何使用Vuex-Store非同步獲取資料

接下來我們一起看一下js檔案中是如何新建模組方法的:

1.2 在state方法中初始化基本資料;

Nuxt中如何使用Vuex-Store非同步獲取資料

1.3 在mutation方法中更新資料

在mutations中會接收state作為第一個引數並且可以接收其他傳參;(Tips:一條重要的原則就是要記住 mutation 必須是同步函式Nuxt中如何使用Vuex-Store非同步獲取資料

在元件中呼叫mutations中的方法改變狀態樹種的資料

Nuxt中如何使用Vuex-Store非同步獲取資料

1.4 在store裡如何呼叫非同步資料?

由於mutation方法中只能執行同步方法,如何在store中獲取遠端伺服器中的資料呢?

在此Vuex提供了一個解決方法action,action是一個類似於mutation的方法,它可以包含任何任意非同步操作,不同之處在於action不能直接修改狀態只能提交mutation;

Nuxt中如何使用Vuex-Store非同步獲取資料

在actions中定義好方法後需要在元件中使用store.dispatch進行觸發;(Tips:注意檔案位置)

Nuxt中如何使用Vuex-Store非同步獲取資料

Ps:在這裡只是針對筆者的使用方式進行討論,其他呼叫方式參考官方文件

至此兩種簡單的改變狀態樹中的資料方法結束,後續筆者還會繼續新增方法,如有錯誤請多多指教;


相關文章