How to properly implement calling multiple dialog boxes in Vue (Vuex, Element UI)?

Question

Vue.js

Now the call of one window is implemented, by changing its visibility state in the Store
. There is a modals object in the store. And dialogSignUp and dialogSignIn are two windows

state: {
    modals: {
      dialogSignUp: false,
      dialogSignIn: false
    }
  },
  mutations: {
    DIALOG_SHOW(state, value) {
      state.modals.dialogSignUp = value;
    }
  },
  actions: {
    dialogShow({ commit }, value) {
      commit("DIALOG_SHOW", value);
    }
  },
  getters: {
    dialogSignUp: state => {
      return state.modals.dialogSignUp;
    }
  }

Now through the dialog component, I interact with the Store like this

computed: {
    modal: {
      get() {
        return this.$store.getters.dialogSignUp;
      },
      set(value) {
        this.$store.dispatch("dialogShow", value);
      }
    }
  },

The window itself and its call

<el-button plain type="default" size="small" @click="modal = !modal">Popup</el-button>
  <el-dialog :title="title" :visible="modal" @close="modal = false">
    <slot></slot>
    <span slot="footer" class="dialog-footer">
      <el-button @click="modal = false">Отмена</el-button>
      <el-button type="primary" @click="popupAction">Ок</el-button>
    </span>
  </el-dialog>

But now it works for one dialogSignUp window, but how to correctly implement the opening of windows when there are several of them. How can they be accessed through the window call button so as not to write a new "modal:{get(), set()}" , and what can be done in the store so as not to write their own action and mutation for each window? Thanks in advance, at least for the idea.

Answer 1

Pass to the mutation instead of just the state of the dialog, an object of the form { имя_диалога: состояние }. Then, when updating the state of the dialogs, there will be no need to refer to them by name:

mutations: {
  dialogShow: (state, payload) => Object.assign(state.modals, payload),
},

In the component, instead of the modal computed property responsible for working with one dialog, there will be a modals property that provides the status of all dialogs. And so that the change in the state of the dialog still looks like an assignment, we will use Proxy, where we will intercept the setting of values ​​​​and cause a mutation:

modals() {
  return new Proxy(this.$store.state.modals, {
    set: (target, prop, value) => {
      this.$store.commit('dialogShow', { [prop]: value });
      return true;
    },
  });
},

Accordingly, in the template, we replace setting the value of a simple property with setting the value of an object property:

<el-button @click="modals.dialogSignIn = true">sign in</el-button>

<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
  <span slot="footer" class="dialog-footer">
    <el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
  </span>
</el-dialog>

Watch live .