一
1.什么是Vuex?
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式琼懊。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化交洗。
個(gè)人理解：即為組件間互相傳遞信息
狀態(tài)自管理應(yīng)用包含以下幾個(gè)部分：
- state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源痢虹；
- view鸵闪，以聲明方式將 state 映射到視圖；
- actions概疆，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化逗威。
2.什么情況使用Vuex？
雖然 Vuex 可以幫助我們管理共享狀態(tài)岔冀，但也附帶了更多的概念和框架凯旭。這需要對(duì)短期和長(zhǎng)期效益進(jìn)行權(quán)衡。
如果您不打算開(kāi)發(fā)大型單頁(yè)應(yīng)用使套，使用 Vuex 可能是繁瑣冗余的罐呼。確實(shí)是如此——如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex侦高。一個(gè)簡(jiǎn)單的 store 模式就足夠您所需了嫉柴。但是，如果您需要構(gòu)建一個(gè)中大型單頁(yè)應(yīng)用奉呛，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)计螺，Vuex 將會(huì)成為自然而然的選擇。
個(gè)人理解：Action是進(jìn)行異步操作的瞧壮，組件可以直接commit,Devtools監(jiān)聽(tīng)的是Commit
個(gè)人理解：actions直接操作state里的狀態(tài)危尿，但是沒(méi)有了時(shí)間旅行devtools
二.
1.導(dǎo)入Vuex
1.1導(dǎo)入Vuex的幾種方式
- CDN
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js">
</script>
- 模塊導(dǎo)入(腳手架安裝時(shí)可選)
npm install vuex --saveyarn add vuex
--------------------------------------------------------------------
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
1.2實(shí)例化
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
------------------------------------------------
const vm = new Vue({
store
el:'root'.
})
1.3在頁(yè)面調(diào)用時(shí)候
{{$store.state.count}}
--------------------------------
//會(huì)顯示0
1.4在瀏覽器調(diào)用
store.commit('increment')
console.log(store.state.count) // -> 1
———————————————————————————————————————————————
以下是視圖------>狀態(tài)管理的過(guò)程！Ｄ俪铡Ｒ杲俊！Ｂ拊巍＜没丁！Ｐ≡ā７ㄈ臁！３晏搿０氲取Ｗ岢睢！杀饵！
2.獲取Vuex狀態(tài)的方法（沒(méi)有actions的時(shí)候,直接commit的情況）
以下都會(huì)使用此實(shí)例的對(duì)象
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
- 2.1.原方法
<div>{{count}}</div>
---------------------------------
const vm = new Vue({
computed:{
count(){
return this.$store.state.count
}
}
})
- 2.2.解構(gòu)映射的方法
<div>{{count}}</div>
--------------------------------------
const {mapState} = Vuex
const vm = new Vue({
computed:mapState(['count'])
})
//將count映射出來(lái)
1.
3.獲取Vuex的Mutations的方法（沒(méi)有actions的時(shí)候,直接commit的情況）
- 狀態(tài)管理
<div @click=''getMutations">{{count}}</div>
--------------------------------------
const {mapState} = Vuex
const vm = new Vue({
methods:{
getMutations(){
this.$store.commit('getMutations')
}
}
})
3.2..原方法（傳參的話用原方法）
<div @click=''increment ">{{count}}</div>
//--------------------------------------
const {mapMutations} = Vuex
const vm = new Vue({
methods:matMutattions([
increment
])
})
4.有actions情況ＣФ凇！Ｇ芯唷Ｐ喽小！Ｃ瘴颉；靶ぁ！Ｆ闲摇最筒！
const vm = new Vue({
methods:{
...matMutattions([
increment
])
}
有其他方法都可以添加，在方法里使用this.$store.dispatch(' ( actions里面的方法) ')Ｎ颠丁床蜘！
視圖里的方法都需要dispatch,而不是原來(lái)的commit,此時(shí)commit操作在actions里面執(zhí)行！缅叠！
總結(jié)
Vue注意的事項(xiàng)：先把所有的鏈都寫(xiě)出來(lái)悄泥，即使是actions是同步的！肤粱！
