Don't use mutations directly

src/components/Login.vue

@@ -53,7 +53,7 @@
 
 <script lang="ts">
 import { Component, Vue, Emit, Prop } from 'vue-property-decorator';
-import { Mutation } from 'vuex-class';
+import { Action } from 'vuex-class';
 import userService from '@/shared/userService';
 import { setBaseUrl } from '@/shared/apiService';
 
@@ -63,7 +63,7 @@ const defaultURL = 'http://localhost:8080';
 
 @Component({})
 export default class Login extends Vue {
-  @Mutation setLoggedIn;
+  @Action setLoggedIn;
 
   @Prop({ default: false }) inModal!: boolean;
 

src/components/ftbot/BotAlerts.vue

@@ -17,6 +17,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
+import { AlertActions } from '@/store/modules/alerts';
 
 const alerts = namespace('alerts');
 
@@ -24,10 +25,10 @@ const alerts = namespace('alerts');
 export default class BotAlerts extends Vue {
   @alerts.State activeMessages;
 
-  @alerts.Mutation removeAlert;
+  @alerts.Action [AlertActions.removeAlert];
 
   closeAlert() {
-    this.removeAlert();
+    this[AlertActions.removeAlert]();
   }
 }
 </script>

src/components/layout/NavBar.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import LoginModal from '@/views/LoginModal.vue';
-import { State, Mutation, namespace } from 'vuex-class';
+import { State, Action, namespace } from 'vuex-class';
 import userService from '@/shared/userService';
 import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
 
@@ -59,7 +59,7 @@ export default class NavBar extends Vue {
 
   @State isBotOnline!: boolean;
 
-  @Mutation setLoggedIn;
+  @Action setLoggedIn;
 
   @ftbot.Action ping;
 

src/store/index.ts

@@ -41,6 +41,9 @@ export default new Vuex.Store({
       commit('setAutoRefresh', newRefreshValue);
       localStorage.setItem(AUTO_REFRESH, JSON.stringify(newRefreshValue));
     },
+    setLoggedIn({ commit }, loggedin: boolean) {
+      commit('setLoggedIn', loggedin);
+    },
     setIsBotOnline({ commit, dispatch }, isOnline) {
       commit('setIsBotOnline', isOnline);
       if (isOnline === false) {

src/store/modules/alerts.ts

@@ -1,20 +1,33 @@
+export enum AlertActions {
+  addAlert = 'addAlert',
+  removeAlert = 'removeAlert',
+}
+
+export enum AlertMutations {
+  addAlert = 'addAlert',
+  removeAlert = 'removeAlert',
+}
+
 export default {
   namespaced: true,
   state: {
     activeMessages: [],
   },
   mutations: {
-    addAlert(state, message) {
+    [AlertMutations.addAlert](state, message) {
       console.log(`adding message '${message.message}' to message queue`);
       state.activeMessages.push(message);
     },
-    removeAlert(state) {
+    [AlertMutations.removeAlert](state) {
       state.activeMessages.shift();
     },
   },
   actions: {
-    addAlert({ commit }, message) {
-      commit('addAlert', message);
+    [AlertActions.addAlert]({ commit }, message) {
+      commit(AlertMutations.addAlert, message);
+    },
+    [AlertActions.removeAlert]({ commit }) {
+      commit(AlertMutations.removeAlert);
     },
   },
 };