1.study Vue-X
+ 安裝 npm install vuex --save
+ main.js 引用 import Vuex form "vuex"
+ use Vue.use(Vuex);
+ 將store實(shí)例掛載到實(shí)例化的vue中
+ 實(shí)例化Vuex倉(cāng)庫(kù)
? ? - const store = new Vuex.Store({})
? ? - 所有屬性都是一個(gè)對(duì)象 {} !
? 1.1核心概念一 : State
? ? + state是Vuex中的公共的狀態(tài),vuex中的state好比是所有組件的data,用于保存所有組件的公共數(shù)據(jù).
? ? + 所有組件都能通過(guò)
? ? - this.$store.state.xxx 來(lái)訪問(wèn)vuex中的屬性.
? 1.2核心概念二 : Getters
? ?+ getters屬性理解為所有組件的computed屬性,也就是計(jì)算屬性,vuex的官方文檔也是說(shuō)可以將getters看做是? ? ? ? ? ? ?store的計(jì)算屬性,
? ? + getters的返回值會(huì)根據(jù)它的依賴(lài)被緩存起來(lái),只有依賴(lài)改變它才會(huì)重新計(jì)算.
? ? - this.$store.getters.xxx 計(jì)算后返回的值
?1.3核心概念三 : Mutations
? ?+ Mutations屬性相當(dāng)于是store中的methods,mutations中保存者更改數(shù)據(jù)的回調(diào)函數(shù),該函數(shù)名官方規(guī)定叫type,? ? ? ?第一個(gè)參數(shù)是store,第二個(gè)參數(shù)是payload,也就是自定義的參數(shù).
? ? + 組件定義方法@click....
? ? + 組件methods中,執(zhí)行方法,將方法提交到vuex的mutations
? ? ? - this.$store.commit("以字符串的方式提交",自定義屬性);
? ? + vuex中mutations執(zhí)行方法(state,自定義屬性){書(shū)寫(xiě)邏輯}
? 1.4核心概念四 : Actions
? ? + actions類(lèi)似于mutations,不同在于:
? ? ? 1.actions提交的是mutations而不是直接更改狀態(tài).
? ? ? 2.actions中可以包含異步操作,mutations中絕對(duì)不允許出現(xiàn)異步.
? ? ? 3.actions中的回調(diào)函數(shù)的第一個(gè)參數(shù)是context,是一個(gè)與store實(shí)例具有相同屬性和方法的對(duì)象.
? ? + 組件定義方法@click....
? ? + 組件methods中,執(zhí)行方法,將方法提交到vuex的actions
? ? - this.$store.dispatch("以字符串的方式提交",自定義屬性);
? ? + actions執(zhí)行傳來(lái)的方法(context:第一個(gè)參數(shù),palyload:自定義參數(shù)){
? ? ? context.commit("這里提交的是mutations中的方法:異步操作",組件傳來(lái)的自定義參數(shù))}.
? 1.5核心概念五 : Modules
? ? + 由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割
? ? ? - const moduleA = {
? ? ? ? state: { ... },
? ? ? ? mutations: { ... },
? ? ? ? actions: { ... },
? ? ? ? getters: { ... }
? ? ? ? }
? ? ? ? const moduleB = {
? ? ? ? state: { ... },
? ? ? ? mutations: { ... },
? ? ? ? actions: { ... }
? ? ? ? }
? ? ? ? const store = new Vuex.Store({
? ? ? ? modules: {
? ? ? ? ? ? a: moduleA,
? ? ? ? ? ? b: moduleB
? ? ? ? }
? ? ? ? })
