Vuex.Action 的笔记

最新推荐文章于 2022-03-20 18:05:19 发布

352328759

最新推荐文章于 2022-03-20 18:05:19 发布

阅读量2k

点赞数 1

分类专栏： Vue 知识盲区妙用

本文链接：https://blog.csdn.net/u013970232/article/details/100744011

版权

Vue 同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

知识盲区

16 篇文章 0 订阅

订阅专栏

妙用

12 篇文章 0 订阅

订阅专栏

这次的 demo 越写越复杂,估计大家会看不下去吧.如果有耐心研究讨论的,建议重点留意[“dispatch n”]位置的代码

这次的 demo 演示了两种多.dispatch() 连用的方式

自定义方式: 使用时调用 dispatch1, 执行后返回到 dispatch1.then, 在 dispatch1.then 里调用 dispatch2 或者其它
预定义方式: dispatch1 对应的 action 里写好下一步调用的 dispatch2; 使用是调用 dispatch1

两种方式的区别在于 dispatch2 可以不可以被其它替换

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Vuex.Action 的笔记</title>
		<style></style>
	</head>

	<body>

		<div id="swq">
			<swq ref="swq"></swq>
		</div>

		<script type="text/x-template" id="swq-template">
			<div></div>
		</script>

		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script src="http://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

		<script type="text/javascript">
			function Consoled(a, b) {
				console.log(a + " --consoled-- " + b)
			}
			const store = new Vuex.Store({
				modules: {
					modA: {
						namespaced: true,
						state: {
							theme: "modA-theme",
						},
						mutations: {
							mutB(state, _val) {
								Consoled("modA/mutB", _val)
								state.theme = _val
							},
						},
						actions: {
							actB(context, _val) {
								var _this = this
								Consoled("modA/actB", _val)
								return new Promise((resolve, reject) => {
									setTimeout(function() {
										_this.commit("modA/mutB", ++_val)
										resolve(++_val)
									}, 1000)
								})
							},
						},
					},
					modB: {
						namespaced: false,
						state: {
							theme: "modB-theme",
						},
						mutations: {
							mutB(state, _val) {
								Consoled("modB/mutB", _val)
								state.theme = _val
							},
						},
						actions: {
							actB(context, _val) {
								var _this = this
								Consoled("modB/actB", _val)
								return new Promise((resolve, reject) => {
									setTimeout(function() {
										_this.commit("mutB", ++_val)

										Consoled("dispatch 4", _val)
										_this.dispatch("actA", ++_val).then(function(str) {
											vu.$refs.swq.ctabState(["count", "modA.theme", "modB.theme"])
											Consoled("end", 0)
											resolve(++_val)
										}).catch(function() {})

									}, 1000)
								})
							},
						},
					},
				},
				state: {
					count: 0,
				},
				mutations: {
					mutA(state, _val) {
						Consoled("mod0/mutA", _val)
						state.count++
					},
				},
				getters: {},
				actions: {
					actA(context, _val) {
						var _this = this
						Consoled("mod0/actA", _val)
						return new Promise((resolve, reject) => {
							setTimeout(function() {
								_this.commit("mutA", ++_val)
								resolve(++_val)
							}, 1000)
						})
					},
				},
			})

			/* *** */

			var swq = {
				template: "#swq-template",
				props: [],
				data() {
					return {}
				},
				computed: {}, //计算
				components: {}, //组件
				watch: {}, //看
				methods: {
					//方法
					ctabState(_keys) {
						if(Object.prototype.toString.call(_keys) !== "[object Array]" || _keys.length == 0) {
							return false;
						}
						var _this = this
						var _data = {}

						for(var i = 0; i < _keys.length; i++) {
							var _arr = []
							var _val = _this.$store.state
							var _key = String(_keys[i])

							if(_key.indexOf(".") > -1) {
								_arr = _key.split(".")
							} else {
								_arr.push(_key)
							}

							for(var j = 0; j < _arr.length; j++) {
								_val = _val[_arr[j]]
							}

							//console.log(Object.prototype.toString.call(_val))
							if(Object.prototype.toString.call(_val) == "[object Object]" || Object.prototype.toString.call(_val) == "[object Array]") {
								_val = JSON.stringify(_val)
							}
							_data[_key] = _val
						}
						console.table(_data)
					}
				},
				created() {
					//创建
				},
				mounted() {
					//安装

					var _this = this

					_this.ctabState(["count", "modA.theme", "modB.theme"])

					/* *** */

					console.log("带 .then().catch() 的 .dispatch()")
					console.log("自定义的多 .dispatch() 连用")
					Consoled("dispatch 1", 1)
					_this.$store.dispatch("actA", 2).then(function(str) {
						_this.ctabState(["count", "modA.theme", "modB.theme"])

						console.log("调用具名模块的 .dispatch()")
						Consoled("dispatch 2", str)
						_this.$store.dispatch("modA/actB", ++str).then(function(str1) {
							_this.ctabState(["count", "modA.theme", "modB.theme"])

							console.log("调用具名模块的 .dispatch()")
							console.log("预定义的多 .dispatch() 连用")
							Consoled("dispatch 3", str1)
							_this.$store.dispatch("actB", ++str1)

						}).catch(function() {})
					}).catch(function() {})

				},
			};
			var vu = new Vue({
				el: "#swq",
				store,
				components: {
					swq: swq,
				},
			})
		</script>
	</body>

</html>