My application has a simple plugin that handles communication between components. There is a specialized component called "Communicates.vue" which listens for changes in an array declared in the plugin and displays toast messages. However, I am facing an issue with reactivity as the array always remains empty. I'm certain that I have implemented something similar before and it worked fine. Can you spot what I might have missed?
Communicates.vue
<div class="communicates">
{{$communicates.messages}} <!-- always empty :( -->
<transition-group mode="fade" name="toasts">
<Toast
v-for="communicate in $communicates.messages"
:key="communicate"
:communicate="communicate"
@close="$communicates.remove(communicate)"
/>
</transition-group>
</div>
</template>
<script>
import Toast from '@/components/Toast';
import { mapGetters, mapActions } from 'vuex';
export default {
components: {
Toast
}
}
</script>
Plugin:
const Communicates = {
install(Vue) {
Vue.prototype.$communicates = {
messages: [],
success(message) {
this.messages.push({ type: 'success', message })
debugger; // OK, app stops here, so it should be added
},
error(message) {
this.messages.push({ type: 'error', message })
},
remove(communicate) {
this.messages.splice(this.messages.indexOf(communicate), 1)
}
}
}
}
export default Communicates // of course I did Vue.use in main.js