Nuxt中如何使用Vuex-Store異步獲取數據

Nuxt是一個基於Vue.js的通用型框架，它集成了使用Vue開發的絕大數組件/框架。

長話短說如何在Vuex-store中獲取異步數據呢？

在Nuxt中因爲集合了Vuex還有其餘的一些配置，大大的方便了咱們使用Vuex；在Nuxt官方文檔中寫到：

在這裏筆者爲了方便使用了模塊的方式去使用store；

1.1 首先如今store目錄下新建.js文件，因爲業務需求新建了幾個模塊的.js文件。

接下來咱們一塊兒看一下js文件中是如何新建模塊方法的:

1.2 在state方法中初始化基本數據；

1.3 在mutation方法中更新數據

在mutations中會接收state做爲第一個參數而且能夠接收其餘傳參；（Tips：一條重要的原則就是要記住 mutation 必須是同步函數。）

在組件中調用mutations中的方法改變狀態樹種的數據

1.4 在store裏如何調用異步數據？

因爲mutation方法中只能執行同步方法，如何在store中獲取遠程服務器中的數據呢？

在此Vuex提供了一個解決方法action，action是一個相似於mutation的方法，它能夠包含任何任意異步操做，不一樣之處在於action不能直接修改狀態只能提交mutation；

在actions中定義好方法後須要在組件中使用store.dispatch進行觸發；（Tips：注意文件位置）

Ps：在這裏只是針對筆者的使用方式進行討論，其餘調用方式參考官方文檔；

至此兩種簡單的改變狀態樹中的數據方法結束，後續筆者還會繼續添加方法，若有錯誤請多多指教；