Vuex的乾貨複習

2021-10-03 13:04:24 字數 1296 閱讀 2832

概念:

vuex是vue配套的公共資料管理工具,它可以把一些共享的資料,儲存到vuex中,方便 整個程式中的任何元件直接獲取或修改我們的公共資料。

vuex是為了儲存 元件之間共享資料而誕生的,如果元件之間有要共享的資料,可以直接掛載到vuex中,

而不必通過 父子元件傳值了,如果 元件的資料不需要共享,此時,這些不需要共享的私有資料,沒有必要放到vuex中

vuex是乙個全域性的共享資料儲存區域,就相當於是乙個資料的倉庫

配置vuex步驟

1.執行cnpm i vuex -s

2.匯入包 import vuex from 『vuex』

3.註冊vuex到vue中 vuex.use(vuex)

4.new vuex.store(,

mutations:

注意:如果元件想要呼叫mutations中的方法,只能使用this.$store.commit('方法名')

},getters:

//回顧對比,發現getters中的方法,和元件中的過濾器比較類似, 因為 過濾器和getters 都沒有修改原資料,都是把原資料做了一層包裝,提供給了呼叫者。

其次,getters也和computed 比較像,只要state中的資料發生變化了,如果getters正好也引用了這個資料,那麼就會立即觸發getters的重新求值

}總結1:state中的資料,不能直接修改,如果想要修改,必須通過mutations提供的方法,需要通過this.sto

re.c

ommi

t(′方

法名稱′

,唯一的

乙個引數

)2.如果

元件想要

直接從s

tate

上獲取數

據:需要

this

.store.commit('方法名稱',唯一的乙個引數) 2.如果元件想要直接 從 state上獲取資料:需要this.

store.

comm

it(′

方法名稱

′,唯一

的乙個參

數)2.

如果元件

想要直接

從sta

te上獲

取資料:

需要th

is.store.state.***

3.如果store中 state上的資料,在對外提供的時候,需要做一層包裝,那麼 推薦使用getters 如果需要使用getters,則用this.$store.getters.***

我們可以找乙個例子練一下

vuex總結複習筆記

vuex是vue.js的官方資料管理架構。為了實現元件間資料共享的一種機制。vuex的使用步驟 執行npm install vuex 如果使用vue cli腳手架建立,在建立的時候選擇了安裝這裡就不用安裝了 在store index.js中匯入 vuex import vuex from vuex ...

Vuex複習 簡單demo

原本覺得自己之前已經學過vuex了,要不直接上手webpack試一下 iview元件庫作者的 vue.js實戰 裡是這樣安排的 但是實在頭疼,不清楚是不是webpack版本還是配置的問題,跑起來一直報錯.版本裝的跟書上的也一樣,甚至webpack dev server版本也一樣 改了埠 重灌了nod...

vue複習(vuex狀態管理)

啟用倉庫 頁面中呼叫倉庫中是資料 vue專案中 簡寫 補充 沒有簡寫的用法 不推薦 建立檔案store index.js 建立倉庫 import vue from vue import vuex from vuex 匯入各個模組的小倉庫 import goods from models goods ...