Vuex是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式筛欢。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化唇聘。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension版姑,提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能迟郎。
核心概念
- state剥险,驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源;
- mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)
- actions宪肖,響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化表制。
- Getter健爬,store 的計(jì)算屬性,
State
在 Vue 組件中獲得 Vuex 狀態(tài)
- 通過在根實(shí)例中注冊(cè) store 選項(xiàng)么介,該 store 實(shí)例會(huì)注入到根組件下的所有子組件中娜遵,且子組件能通過
this.$store
訪問到
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0
},
mutations: {
},
actions: {
},
modules: {
}
})
<template>
<div class="about">
<h1>這是一個(gè)關(guān)于頁面{{count}}</h1>
</div>
</template>
<script>
export default {
name: "commerceUser",
data () {
return {
count: this.$store.state.count,
}
}
}
</script>
- 當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余壤短。為了解決這個(gè)問題魔熏,我們可以使用
mapState
輔助函數(shù),通過將最終對(duì)象傳給computed
屬性鸽扁,幫助生成計(jì)算屬性蒜绽。
<template>
<div class="about">
<h1>這是一個(gè)關(guān)于頁面{{count}}</h1>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "commerceUser",
computed: {
...mapState(['count'])
},
}
</script>
mutation
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)桶现。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:2
},
mutations: {
add (state)//add (state,step) {
state.count++
}
},
actions: {
},
modules: {
},
getters:{
}
})
<template>
<div class="about">
<h1>{{$store.state.count}}</h1>
<button @click="bt">+1</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "commerceUser",
data () {
return {}
},
methods:{
bt(){
this.$store.commit('add')
}
}
}
</script>
可以在組件中使用 this.$store.commit('xxx') 提交 mutation躲雅,或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用。
<template>
<div class="about">
<h1>{{$store.state.count}}</h1>
<button @click="bt">+1</button>
</div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
name: "commerceUser",
data () {
return {}
},
methods:{
...mapMutations(['add']),
bt(){
this.add()
}
}
}
</script>
actions
Action 類似于 mutation骡和,不同在于:
- Action 提交的是 mutation相赁,而不是直接變更狀態(tài)。
- Action 可以包含任意異步操作慰于。
Getter
Vuex 允許我們?cè)?store 中定義“getter”(可以認(rèn)為是 store 的計(jì)算屬性)钮科。就像計(jì)算屬性一樣,getter 的返回值會(huì)根據(jù)它的依賴被緩存起來婆赠,且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算绵脯。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0
},
mutations: {
},
actions: {
},
modules: {
},
getters:{
show(state){
return '當(dāng)前最新數(shù)據(jù)'+state.count
}
}
})
<template>
<div class="about">
<h1>這是一個(gè)關(guān)于頁面{{this.$store.getters.show}}</h1>
</div>
</template>