Add event bus vue component. Refactoring helpers.

src/components/Article/Details.vue

@@ -66,7 +66,7 @@
 <script>
     import { mapGetters } from 'vuex';
     import YoutubeButton from '@/components/Article/YoutubeButton';
-    import { getArticleLevel, declOfNum } from '@/helpers';
+    import { getArticleLevel, declOfNum } from '@/utils';
 
     export default {
         props: {

src/components/Article/Word/Card.vue

@@ -39,7 +39,7 @@
 
 <script>
     import { mapGetters } from 'vuex';
-    import { getFullOriginalWord, WORD_TYPES } from '@/helpers';
+    import { getFullOriginalWord, WORD_TYPES } from '@/utils';
 
     export default {
         props: {

src/components/User/ProfileData.vue

@@ -120,7 +120,7 @@
 
 <script>
     import { mapGetters } from 'vuex';
-    import { emailRules, passwordRules, nameRules } from "@/helpers";
+    import { emailRules, passwordRules, nameRules, EVENTS } from "@/utils";
 
     export default {
         data: () => ({
@@ -162,5 +162,13 @@
                 });
             },
         },
+        created() {
+            this.$bus.$on(EVENTS.USER.DATA_CHANGED, () => {
+                this.dialog = false;
+            });
+        },
+        beforeDestroy() {
+            this.$bus.$off(EVENTS.USER.DATA_CHANGED);
+        },
     };
 </script>

src/helpers/index.js

@@ -1,4 +0,0 @@
-export * from '@/helpers/article';
-export * from '@/helpers/formRules';
-export * from '@/helpers/utils';
-export * from '@/helpers/word';

src/main.js

@@ -10,10 +10,11 @@ import 'vuetify/dist/vuetify.min.css';
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 
 import App from '@/App.vue';
-import router from '@/router';
-import store from '@/store';
 import firebaseConfig from '@/config/firebase';
 import formattedDate from '@/filters/formattedDate';
+import router from '@/router';
+import store from '@/store';
+import { setUpEventBus } from '@/utils';
 
 const firebaseApp = firebase.initializeApp(firebaseConfig);
 const db = firebaseApp.firestore();
@@ -31,6 +32,8 @@ Vue.use(VueYouTubeEmbed);
 
 Vue.filter('formattedDate', formattedDate);
 
+setUpEventBus();
+
 new Vue({
   router,
   store,

src/store/user.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import firebase from 'firebase/app';
 import 'firebase/auth';
+import { EventBus, EVENTS } from '@/utils';
 
 export default {
     state: {
@@ -118,6 +119,7 @@ export default {
                 });
 
             await commit('setProcessing', false);
+            await EventBus.notify(EVENTS.USER.DATA_CHANGED);
         },
     },
     getters: {

src/utils/eventBus.js

@@ -0,0 +1,25 @@
+import Vue from 'vue';
+
+export const EVENTS = {
+    USER: {
+        DATA_CHANGED: 'user-profile-data-changed',
+    },
+};
+
+export const EventBus = new Vue({
+    methods: {
+        notify(eventName, eventPayload) {
+            this.$emit(eventName, eventPayload);
+        },
+    },
+});
+
+export const setUpEventBus = () => {
+    Object.defineProperties(Vue.prototype, {
+        $bus: {
+            get: function() {
+                return EventBus;
+            },
+        },
+    });
+}

src/utils/index.js

@@ -1,4 +1,11 @@
+export * from '@/utils/helpers/article';
+export * from '@/utils/helpers/formRules';
+export * from '@/utils/helpers/word';
+
+export * from '@/utils/eventBus';
+
 export const declOfNum = (number, titles) => {
     const cases = [2, 0, 1, 1, 1, 2];
     return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
 };
+

src/views/SignIn.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-    import { emailRules, passwordRules } from '@/helpers';
+    import { emailRules, passwordRules } from '@/utils';
 
     export default {
         beforeMount() {

src/views/SignUp.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script>
-    import { emailRules, passwordRules, nameRules } from '@/helpers';
+    import { emailRules, passwordRules, nameRules } from '@/utils';
 
     export default {
         beforeMount() {