命名空间
默认情况下，模块内部的 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>
<!-- saved from url=(0036)http://www.352328759a.site/lin/l.php -->
<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">
const store = new Vuex.Store({
modules: {
modA: {
namespaced: true,
state: {
theme: "modA-theme",
},
mutations: {
mutB(state, theme) {
console.log("modA-mutB")
state.theme = theme
},
},
},
modB: {
namespaced: false,
state: {
theme: "modB-theme",
},
mutations: {
mutB(state, theme) {
console.log("modB-mutB")
state.theme = theme
},
},
},
},
state: {
count: 0,
},
mutations: {
mutA(state, n) {
state.count++
},
},
getters: {},
actions: {
decrement: ({
commit
}) => {
console.log(1)
setTimeout(function() {
commit("mutA")
}, 1000)
// commit("decrement")
}
},
})
/* *** */
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("https://blog.csdn.net/lzb348110175/article/details/89387495")
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"])
/* *** */
// _this.$store.dispatch("decrement")
// _this.$store.commit("modA/mutB", "bbb")
// _this.ctabState(["count", "modA.theme", "modB.theme", "modC.theme"])
},
};
var vu = new Vue({
el: "#swq",
store,
components: {
swq: swq,
},
})
</script>
</body>
</html>
//end
