Vuex管理dialog、toast等常见全局性组件状态时唯一性的问题解决
短信预约 -IT技能 免费直播动态提醒
前言
工作中经常会用到类似于 dialog、toast、popover 等一些状态提示组件。对于这种全局性的组件，通常会用到 vuex 来管理组件的信息。这样的好处是代码维护起来更加友好，但是也需要考虑唯一性的问题。
场景
以 dialog 为例，唯一性问题是指当页面中有多处内容调用了同一个事件，而这个事件都是修改了全局的 vuex 状态，从而导致页面中多次依赖于全局状态的组件会同时展示。例如以下场景：
要解决这样的问题，需要在 state 中设置一个 id 变量，同时给组件调用的时候传一个 id，在展示组件之前判断两个 id 是否一致，一致才展示。
代码
store.js
const state = {
id: "", // 用于判断唯一性
isShow: false,
};
const mutations = {
setShowDialog(state, data) {
state.id = data.id;
state.isShow = true;
},
};
export default {
namespaced: true, // 解决命名冲突(使用时需要备注模块名)
state,
mutations,
};dialog.vue
<!-- 全局dialog组件 -->
<template>
<div v-if="isShowCurrentDialog">
<!-- 组件逻辑省略 -->
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
props: {
currId: {
type: String,
default: "",
},
},
computed: {
...mapState(["id"]),
isShowCurrentDialog() {
if (this.currId) {
return this.id === this.currId ? this.isShow : false;
} else {
return this.isShow;
}
},
},
};
</script>xxx.vue
<!-- 调用dialog的组件 -->
<template>
<div>
<ul>
<!-- 模拟同时多个dialog调用场景 -->
<li v-for="item in listData" :key="item.name" @click="setShowDialog({ id: item.name })">
<Dialog :id="item.name" />
</li>
</ul>
</div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
data() {
return {
listData: [
{
name: "aaa",
},
{
name: "bbb",
},
{
name: "ccc",
},
],
};
},
methods: {
...mapMutations(["setShowDialog"]),
},
};
</script>到此这篇关于Vuex管理dialog、toast等常见全局性组件状态时唯一性的问题的文章就介绍到这了,更多相关Vuex全局性组件状态时唯一性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
