1.#mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
//首先导入mapGetters
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想将一个 getter 属性另取一个名字,使用对象形式:
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
2.在组件中分发 Action
你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):
import { mapActions } from 'vuex'
export default {
// ...
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')`
})
}
}
state
export default {
isFullScreen: false
}
mutations
export default {
changeFullScreen (state, flag) {
state.isFullScreen = flag
}
}
export default new Vuex.Store({
// state:用于保存全局共享的数据
state: state,
mutations: mutations,
actions: actions,
getters: getters
/*
很多代码放在一起会导致不容易后期维护
state: {
isFullScreen: false
},
// mutations:用于保存修改全局共享的数据的方法
mutations: {
changeFullScreen (state, flag) {
state.isFullScreen = flag
}
},
// actions 用于保存触发mutations中保存的方法的方法
actions: {
setFullScreen ({ commit }, flag) {
commit('changeFullScreen', flag)
}
},
getters: {
isFullScreen (state) {
return state.isFullScreen
}
}
*/
})
4.actions里的字符串修改为常量
创建一个mutations-type
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'
mutations.js
import { SET_FULL_SCREEN } from './mutations-type'
export default {
/*
changeFullScreen (state, flag) {
state.isFullScreen = flag
}
*/
//想让常量作为方法名称 要加[]
[SET_FULL_SCREEN] (state, flag) {
state.isFullScreen = flag
}
}
actions:
import { SET_FULL_SCREEN } from './mutations-type'
export default {
/*
setFullScreen ({ commit }, flag) {
commit('changeFullScreen', flag)
}
*/
setFullScreen ({ commit }, flag) {
commit(SET_FULL_SCREEN, flag)
}
}