Передавайте в мутацию вместо просто состояния диалога объект вида
{ имя_диалога: состояние }. Тогда при обновлении состояния диалогов не будет необходимости обращаться к ним поимённо:
mutations: {
dialogShow: (state, payload) => Object.assign(state.modals, payload),
},
В компоненте, вместо вычисляемого свойства modal, отвечающего за работу с одним диалогом, будет свойство modals, обеспечивающее получение состояния всех диалогов. А чтобы изменение состояния диалога по-прежнему выглядело как присваивание, воспользуемся Proxy, где будем перехватывать установку значений и вызывать мутацию:
modals() {
return new Proxy(this.$store.state.modals, {
set: (target, prop, value) => {
this.$store.commit('dialogShow', { [prop]: value });
return true;
},
});
},
Соответственно, в шаблоне заменяем установку значения просто свойства на установку значения свойства объекта:
<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>
Посмотреть живьём.
