Vue的一些常用高阶用法

一.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回调函数。