Vuex 是一個專為 Vue.js應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex結構圖

下圖是我總結的Vuex結構圖。

Vuex用法

以一個Vue項目中的商家信息搜索功能為例，記錄Vuex的使用。

分析搜索功能的實現：

1、發送ajax請求，得到后臺響應的數據，將結果展現在界面上。

2、界面的顯示一定是根據數據展示的。

編碼流程:

1、寫接口函數發送ajax請求；

2、寫Vuex；

(1)先寫state：先確定要保存一個什么樣的狀態？發送請求后響應得到的搜索商家列表searchShops: [] 。

searchShops: [] // 搜索商家列表

(2)寫mutation-types:

export const RECEIVE_SEARCH_SHOPS = 'receive_search_shops' // 接收搜索的商品數組

(3)寫mutations：改變state

[RECEIVE_SEARCH_SHOPS](state, {searchShops}) {

state.searchShops = searchShops

},

(4)寫actions:

//異步搜索商家列表

async searchShop({commit, state}, keyword) {

//從state中解構得到經緯度數據

const {latitude, longitude} = state

// 發送異步ajax請求，獲取搜索商家列表result

const result = await reqSearchGoods(latitude+','+longitude, keyword)

// 等待異步函數執行完之后，再執行下一行的提交 mutation

// 提交一個 mutation 請求，與 mutations 模塊中更新狀態的方法名稱一致

// commit(更新狀態的方法名稱，{更新的數據})

// 這里之所以是 result.data 是從api文檔查看的

commit(RECEIVE_SEARCH_SHOPS, {searchShops: result.data})

}

3、寫組件，組件模板：靜態==》動態。

(1)在組件的methods中觸發actions

const keyword = this.keyword.trim()

// 分發事件

this.$store.dispatch('searchShop', keyword)

(2)分發事件后，Vuex中就有返回的數據了，此時先去瀏覽器開發工具的Devtools中的Vuex中查看。

(3)有了數據之后，將數據讀取展現在組件中。

3.1)在組件中引入{mapState}

import {mapState} from 'vuex'

3.2)在計算屬性中:

computed: {

...mapState(['searchShops'])

},

3.3)取數據到靜態組件模板中:

{{}}

總結

以上是生活随笔為你收集整理的ajax结构图,Vuex结构图及用法的全部內容，希望文章能夠幫你解決所遇到的問題。

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