什么是VueX
VueX是專門服務(wù)于Vue.js的狀態(tài)管理模式畜吊，大白話就是Vue項目中有一些全局變量，這些變量每個地方都可以用也可以修改洽议，VueX負責把這些變量以及修改變量的方法包裝起來低匙，這樣會更規(guī)則。
VueX應(yīng)用的核心就是store倉庫避消，項目中要使用VueX低滩，先需要安裝
npm install vuex
然后在src文件夾下創(chuàng)建store
store的組成
const mystore = new VueX.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
getters: {
getCount(state) {
return state.count.toFixed(2)
}
},
actions: {
incrementAsync({ commit }) {
new Promise(resolve => {
setTimeout(() => commit('increment'),100)
})
}
}
})
上面是一個簡單的store,state對象里面的東西就是'全局變量',mutations對象里面則包含的是改變這些全局變量的方法,getters和actions下面再講
store的使用
Vue項目中怎樣才能使用到這個store呢,首先在index.js中導出store
export default mystore
然后在main.js引入，并將它注入到每一個組件中
import store from './store/index'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
此時在組件中岩喷，可以通過this.$store訪問到store
computed: {
count () {
return this.$store.state.count
}
}
也可以用mapState函數(shù)
computed: mapState([
// 映射 this.count 為 store.state.count
'count'
])
Getter
有時候需要把從state中派生一些狀態(tài)委造，譬如toFixed(2),所以出現(xiàn)了getter對象，
通過getter獲取狀態(tài)用輔助方法mapGetters
import { mapGetters } from 'vuex'
computed: {
// 使用對象展開運算符將 getter 混入 computed 對象中
...mapGetters([
'getCount'
// ...
])
}
Mutation
更改store中狀態(tài)的唯一方法就是提交mutation,提交方法store.commit('increment',payload),payload可以是對象也可以是單個的值
注意：mutation必須是同步函數(shù)
在組件中提交mutation
使用this.$store.commit()
methods: {
updateCount(payload) {
this.$store.commit('increment',payload)
}
}
組件中使用
<div @click="updateCount(payload)"></div>
通過mapMutations輔助函數(shù)
import { mapMutations } from 'vuex'
methods: {
...mapMutations([
'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
// `mapMutations` 也支持載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
})
}
組件中使用
<div @click="increment(payload)"></div>
或者
<div @click="add(payload)"></div>
Action
因為Mutation必須是同步函數(shù)均驶，如果要異步修改store的狀態(tài)就需要Action。
Action的特點
- Action 提交的是 mutation枫虏，而不是直接變更狀態(tài)
- Action 可以包含任意異步操作妇穴。
在組件中分發(fā)Action
使用this.$store.pitch()
this.$store.pitch('incrementAsync')
使用mapActions輔助函數(shù)
methods: {
...mapActions([
'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`
// `mapActions` 也支持載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
})
Module
當我們需要的狀態(tài)比較多的時候，store對象就會變得非常臃腫隶债，因此我們可以把store分割成模塊腾它。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
export default new Vuex.Store({
modules: {
moduleA,
moduleB,
moduleC
}
})
上面代碼中，我們把moduleA,moduleB,moduleC都曝露于外死讹，在組件中我們可以用mapState,mapActions,mapGetters,mapActions獲取全部的state,action,getter,action瞒滴，但是如果又的模塊的屬性和方法名相同，那么使用它將會出現(xiàn)沖突赞警，所以需要加入命名空間.
const moduleA = {
namespaced: true,
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
這樣在組件中使用必須帶上模塊的名稱
...mapState({
'amount': 'moduleA/amount'
})
差不多就這樣妓忍，收工...
