Vuex管理dialog、toast等常见全局性组件状态时唯一性的问题解决

const state = {
  id: "", // 用于判断唯一性
  isShow: false,
};

const mutations = {
  setShowDialog(state, data) {
    state.id = data.id;
    state.isShow = true;
  },
};

export default {
  namespaced: true, // 解决命名冲突(使用时需要备注模块名)
  state,
  mutations,
};

<!-- 全局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>

<!-- 调用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>