refactor(user): use store properly

components/LoginForm.vue

@@ -89,7 +89,11 @@ export default Vue.extend({
         this.$auth.setUserToken(accessToken);
 
         this.$auth.setUser(response.data.User);
-        this.$user.set(response.data.User.Id, this.serverUrl, accessToken);
+        this.$store.dispatch('user/set', {
+          id: response.data.User.Id,
+          serverUrl: this.serverUrl,
+          accessToken
+        });
       } catch (error) {
         let errorMessage = this.$t('unexpectedError');
 

components/UserButton.vue

@@ -41,7 +41,7 @@ export default Vue.extend({
           action: () => {
             this.$auth.logout();
             this.$deviceProfile.clear();
-            this.$user.clear();
+            this.$store.dispatch('user/clear');
           }
         }
       ]

plugins/displayPreferenceApi.ts

@@ -19,6 +19,12 @@ declare module 'vue/types/vue' {
   }
 }
 
+declare module 'vuex/types/index' {
+  interface Store<S> {
+    $displayPreferencesApi: DisplayPreferencesApi;
+  }
+}
+
 const displayPreferencesApiPlugin: Plugin = (context, inject) => {
   const config = new Configuration();
 

plugins/user.ts

@@ -1,52 +0,0 @@
-import { Plugin } from '@nuxt/types';
-
-interface UserStore {
-  set: (id: string, serverUrl: string, accessToken: string) => void;
-  clear: () => void;
-}
-
-declare module '@nuxt/types' {
-  interface Context {
-    $user: UserStore;
-  }
-
-  interface NuxtAppOptions {
-    $user: UserStore;
-  }
-}
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $user: UserStore;
-  }
-}
-
-declare module 'vuex/types/index' {
-  interface Store<S> {
-    $user: UserStore;
-  }
-}
-
-const userPlugin: Plugin = (context, inject) => {
-  const user = {
-    set: async (id: string, serverUrl: string, accessToken: string) => {
-      const response = await context.$displayPreferencesApi.getDisplayPreferences(
-        { displayPreferencesId: 'usersettings', userId: id, client: 'vue' }
-      );
-
-      context.store.commit('user/set', {
-        id,
-        serverUrl,
-        accessToken,
-        displayPreferences: response.data.CustomPrefs
-      });
-    },
-    clear: () => {
-      context.store.commit('user/clear');
-    }
-  };
-
-  inject('user', user);
-};
-
-export default userPlugin;

store/user.ts

@@ -1,4 +1,4 @@
-import { MutationTree } from 'vuex';
+import { ActionTree, MutationTree } from 'vuex';
 
 export interface UserState {
   id: string;
@@ -22,16 +22,46 @@ interface MutationPayload {
 }
 
 export const mutations: MutationTree<UserState> = {
-  set(state: UserState, payload: MutationPayload) {
-    state.id = payload.id;
-    state.serverUrl = payload.serverUrl;
-    state.accessToken = payload.accessToken;
-    state.displayPreferences = payload.displayPreferences;
+  SET_USER(
+    state: UserState,
+    { id, serverUrl, accessToken, displayPreferences }: MutationPayload
+  ) {
+    state.id = id;
+    state.serverUrl = serverUrl;
+    state.accessToken = accessToken;
+    state.displayPreferences = displayPreferences;
   },
-  clear(state: UserState) {
+  CLEAR_USER(state: UserState) {
     state.serverUrl = '';
     state.serverUrl = '';
     state.accessToken = '';
     state.displayPreferences = {};
   }
 };
+
+export const actions: ActionTree<UserState, UserState> = {
+  async set(
+    { commit },
+    {
+      id,
+      serverUrl,
+      accessToken
+    }: { id: string; serverUrl: string; accessToken: string }
+  ) {
+    const response = await this.$displayPreferencesApi.getDisplayPreferences({
+      displayPreferencesId: 'usersettings',
+      userId: id,
+      client: 'vue'
+    });
+
+    commit('SET_USER', {
+      id,
+      serverUrl,
+      accessToken,
+      displayPreferences: response.data.CustomPrefs
+    });
+  },
+  clear({ commit }) {
+    commit('CLEAR_USER');
+  }
+};