Within my codebase, I have implemented a dynamic method for adding modal states to the Vuex store and activating them throughout the application. Despite successfully changing the state, I encountered an issue where clicking a button that dispatches the toggle action does not reveal the modal as expected. (This implementation is using the Quasar framework for components)
Component:
<template>
<q-dialog v-model="status" persistent>
<q-card>
<q-card-actions align="right">
<q-btn flat label="Cancel" color="dark" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
import modal from '../../mixins/modal'
export default {
name: 'DiscardSession',
mixins: [modal]
}
</script>
<style scoped>
</style>
Mixin:
export default {
beforeCreate () {
console.log('Defining modal')
this.$store.dispatch('modal/define', this.$options.name)
},
computed: {
status: {
get () {
console.log('Getter triggered')
return this.$store.getters['modal/status'][this.$options.name]
},
set () {
console.log('Setter triggered')
this.$store.dispatch('modal/toggle', this.$options.name)
}
}
}
}
Store:
export default {
namespaced: true,
state: {
status: {}
},
getters: {
status (state) {
return state.status
},
mutations: {
DEFINE_STATUS (state, name) {
state.status[name] = false
},
TOGGLE_STATUS (state, name) {
state.status[name] = !state.status[name]
}
},
actions: {
define ({ commit, state}, name) {
if (!(name in state.status)) commit('DEFINE_STATUS', name)
},
toggle ({ commit, state }, name) {
commit('TOGGLE_STATUS', name)
}
}
}