Vuex管理dialog、toast等常見全局性組件狀態(tài)時唯一性的問題解決

更新時間：2022年11月14日 10:20:35 作者：ychizzz

工作中經常會用到類似于?dialog、toast、popover?等一些狀態(tài)提示組件，這篇文章主要介紹了Vuex管理dialog、toast等常見全局性組件狀態(tài)時唯一性的問題,需要的朋友可以參考下

前言

工作中經常會用到類似于 dialog、toast、popover 等一些狀態(tài)提示組件。對于這種全局性的組件，通常會用到 vuex 來管理組件的信息。這樣的好處是代碼維護起來更加友好，但是也需要考慮唯一性的問題。

場景

以 dialog 為例，唯一性問題是指當頁面中有多處內容調用了同一個事件，而這個事件都是修改了全局的 vuex 狀態(tài)，從而導致頁面中多次依賴于全局狀態(tài)的組件會同時展示。例如以下場景：

要解決這樣的問題，需要在 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等常見全局性組件狀態(tài)時唯一性的問題的文章就介紹到這了,更多相關Vuex全局性組件狀態(tài)時唯一性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: