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>

<!-- 調(diào)用dialog的組件 -->
<template>
  <div>
    <ul>
      <!-- 模擬同時多個dialog調(diào)用場景 -->
      <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>