iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
自我挑戰組

與Vue相遇系列 第 21

Day021-Vue 資料控管介紹(一)

  • 分享至 

  • xImage
  •  

Vue:前陣子,我們學到了組件資料的相互傳遞,包含父元件利用props傳遞資料給子元件、子元件利用$emit傳遞給父元件。然而,這些都是單向資料傳遞:
https://ithelp.ithome.com.tw/upload/images/20201005/20130654DRueEzY9Y3.jpg
對於單一請求數據、修改數據那倒還好,但如果每一個組件、模塊都需要使用某一區塊的資料,很容易造成資料上的問題:

  1. 多個view需要用到同一資料來源
  2. 不同view,需要變更同一資料來源內容
    https://ithelp.ithome.com.tw/upload/images/20201005/20130654GkLnqckfgo.jpg
    因此,如果多個View,需要使用同一資料來源,何不抽出來,並且專門維護呢?因此,我們可以使用Vuex,將資料儲存在store之中。
    https://ithelp.ithome.com.tw/upload/images/20201005/20130654vcujoTVEum.jpg
    上圖的Store區塊,可集中管理資料來源。如此,view需要使用資料時,僅需要dispatch給store,並且從store區塊中拿取資料。

在Store區塊中。可以分為以下幾點來運作:

  1. Actions:主要處理資料來源(API接口),並下指令Commit給Mutation去改變state資料
  2. Mutation:接收Actions的Commit指令後,用來修改State資料內容。
  3. State:主要儲存資料,並且提供view所需要之資料內容。
  4. Getters:當想改變資料內容時,不用在view或component模塊上做資料處理。Getters的使用,不僅可以防止其他區塊需要此部分資料的存在性。

上一篇
Day020-Vue Router介紹(四)動態參數:
下一篇
Day022-Vuex 資料控管介紹(二)-Sate資料內容
系列文
與Vue相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言