一.Vuex篇
当需要使用Vuex中的状态state或方法mutations/actions时,简单的用法是这样的:
dom里:$store.state.hasLogined
,
scirpt里:this.$store.state.hasLogined
当项目Vuex仓库比较庞大时,推荐使用如下写法:
1.state/getters
computed: {
...mapState(['state1','state2']),
// 如果属性位于仓库的子模块里
...mapState('module1', ['state3','state4'])
}
还有种写法:
computed: {
...mapState({
state1: state => state.mystate1,
state2(可自己命名): state => state.submodule(子模块).mystate2
}),
...mapState('mymodule2', {
state3: state => state.mystate3
})
}
2.mutations/actions
methods: {
...mapMutations(['mutations1','mutations2']),
...mapActions(['actions1','actions2'])
// 如果位于仓库的子模块里,写法同上。
}
3.dispatch/commit
// 如果在.vue文件的js部分调用
// 常规调用
this.$store.commit('mymutation1');
this.$store.dispatch('myaction1');
// 如果mutation或action位于子模块中
this.$store.commit('subbmodule/mymutation2');
this.$store.dispatch('submodule/myaction2');
// 如果在vuex的js部分调用
// 如果一个仓库store有两个子模块,submodule1和submodule2,如果要在submodule1中调用submodule2的方法
// payload: 需要传递的参数
dispatch('submodule2/myaction', payload, { root: true })
二.侦听器watch篇
通常我们用watch只使用他的基本用法,如下:
watch: {
myData(newValue, oldValue) {
// doSomething
}
}
其实watch用法还有两个属性,deep和immediate。
用法示例:
watch: {
myData: {
handler() {
// doSomething
},
deep: true,
immediate: true
}
}
1.deep
在Vue2.x中,Vue 是不能检测到对象属性的添加或删除的。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 初始的data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。因此使用deep: true
属性会深入观察此对象,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,修改obj里面任何一个属性都会触发这个监听器里的 handler。
2.immediate
在选项参数中指定immediate: true
将立即以表达式的当前值触发handler回调函数。