[鼠年全馬] W38 | vuex state更新
這週要來介紹一個很好用的套件-Vuex[1]看到名稱應該馬上可以理解他就是Vue專案在使用的套件吧xD有看過我之前的專案開發的文章的人,應該會發現我從來沒有用過Vuex[2]我也是最近這兩週才開始接觸它的~趁著記憶猶新時趕快把它寫起來~如果有使用不當或是有誤的地方再麻煩多指教#Vuex是什麼?萬用起手式來了~所謂的Vuex是什麼呢?他可以做到哪些事呢?官方是這麼介紹它的:Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex也集成到Vue的...
這週要來介紹一個很好用的套件 - Vuex[1]
看到名稱應該馬上可以理解他就是Vue專案在使用的套件吧xD
有看過我之前的專案開發的文章的人,應該會發現我從來沒有用過 Vuex[2]我也是最近這兩週才開始接觸它的~
趁著記憶猶新時趕快把它寫起來~如果有使用不當或是有誤的地方再麻煩多指教
#Vuex是什麼?萬用起手式來了~所謂的Vuex是什麼呢? 他可以做到哪些事呢?
官方是這麼介紹它的:
Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex也集成到Vue的官方調試工具devtools extension,提供了諸如零配置的time-travel調試、狀態快照導入導出等高級調試功能。
blablabla...當時看完這段介紹之後我還是不知道Vuex是在做什麼xD
沒關係我們繼續往下看:
每一個Vuex應用的核心就是store(倉庫)。“store”基本上就是一個容器,它包含著你的應用中大部分的狀態(state)。
到這邊應該稍微可以理解原來它的用途是「管理資料狀態的容器」
#為什麼需要Vuex?原本的做法就可以在每個元件中存放資料了,那為什麼還要用Vuex呢?
通常我們的資料流向會是父傳子,上層傳至下層,保持數據單向流通遇到需要從子層改變父層資料時可以使用 $emit() 呼叫父層方法進而改變數據遇到兄弟同層之間的元件要互相影響時就會有困難了,我自己的做法是將資料放到父層再用父傳子的方式處理但是不論父傳子還是兄弟互傳的做法都非常的麻煩且繁瑣
這時候Vuex就出現了!!
我們可以將需要用到傳遞的資料通通丟進Vuex管理當元件需要使用資料時,可以使用 $store 輕鬆取得數據且透過套件提供的 dispatch 方法,可以從任何元件去改變資料數據
那傳遞呢? 當然用不到囉~透過Vuex我們可以把傳遞的方式取代掉,並且還是保...