Vuex.namespaced 的笔记

最新推荐文章于 2022-09-28 11:43:30 发布

352328759

最新推荐文章于 2022-09-28 11:43:30 发布

阅读量2.3k

点赞数 1

分类专栏： Vue 知识盲区

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

版权

Vue 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

知识盲区

16 篇文章 0 订阅

订阅专栏

命名空间

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

namespaced: true

原文: state: { … }, // 模块内的状态已经是嵌套的了，使用 “namespaced” 属性不会对其产生影响

modules.name.state 是嵌套的;
namespaced 不影响 modules.name.state;
modules.name.state 必然是分区的;

modules.name 会覆盖 state.name

<!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.namespaced 的笔记</title>
		<style></style>
	</head>

	<body>

		<div id="swq">
			<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", "modA-actB")
										resolve("resolve modA actB")
									}, 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", "modB-actB")
										resolve("resolve modB actB")
									}, 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("resolve actA")
							}, 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

					console.log("初始数据, state 必然是分区的, 需要加分区名")
					_this.ctabState(["count", "modA.theme", "modB.theme"])

					/* *** */

					console.log("commit 有两种用法, 都可以带参")
					console.log("mutA 是根mutations 的方法")
					_this.$store.commit("mutA", {
						a: 1
					})
					_this.$store.commit({
						type: "mutA",
						a: 1
					})
					_this.ctabState(["count", "modA.theme", "modB.theme"])

					/* *** */

					console.log("mutB 是 分区 [modA, modB] mutations 的方法")
					console.log("modA 为命名空间, modA.mutB 注册在分区命名空间")
					_this.$store.commit("modA/mutB", "modA/mutB")
					_this.ctabState(["modA.theme", "modB.theme"])
					console.log("modB 没有命名, modB.mutB 注册在全局命名空间")
					_this.$store.commit("mutB", "mutB")
					_this.ctabState(["modA.theme", "modB.theme", "count"])

					/* *** */

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

</html>

参考资料

//end

352328759

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vuex.namespaced 的笔记

命名空间默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模...
复制链接

扫一扫

专栏目录