Develop

src/app/login/components/LoginBaseCard.vue

@@ -4,7 +4,7 @@
       <b-form>
         <b-row class="my-1">
           <b-col sm="3"><label for="type-email">User Name</label></b-col>
-          <b-col sm="9"><b-form-input :value="email" id="type-email" type="text" disabled></b-form-input></b-col>
+          <b-col sm="9"><b-form-input :value="email" id="type-email" type="text" placeholder="Your email" disabled></b-form-input></b-col>
         </b-row>
         <b-row class="my-1">
           <b-col sm="3"><label for="type-password">Password</label></b-col>
@@ -32,7 +32,8 @@
   export default class LoginBaseCard extends Vue {
     @State('login') private login!: LoginState;
     @Action('fetchData', {namespace}) private fetchData: any;
-    @Getter('userEmail', {namespace}) private userEmail!: string;
+    @Getter('name', {namespace}) private name!: string;
+    @Getter('email', {namespace}) private email!: string;
 
     private data() {
       return {
@@ -44,15 +45,5 @@
     private mounted() {
       this.fetchData();
     }
-
-    get email() {
-      const user = this.login && this.login.user;
-      return user && user.email;
-    }
-
-    get name() {
-      const user = this.login && this.login.user;
-      return user && user.name;
-    }
   }
 </script>

src/app/login/vuex/getters.ts

@@ -3,10 +3,16 @@ import { LoginState } from './types';
 import { RootState } from '../../types';
 
 export const getters: GetterTree<LoginState, RootState> = {
-  userEmail(state): string {
+
+  email(state): string {
     const { user } = state;
-    const name = (user && user.name) || '';
     const email = (user && user.email) || '';
-    return `${name}<${email}>`;
+    return email;
+  },
+
+  name(state): string {
+    const { user } = state;
+    const name = (user && user.name) || '';
+    return name;
   },
 };

src/app/sample/components/SampleComponent.vue

@@ -4,7 +4,7 @@
             style="max-width: 100%;"
             class="mb-2">
       <p class="card-text">
-        {{sample.message}}
+        {{message}}
       </p>
       <b-button href="/user-login" variant="primary">Second Module</b-button>
     </b-card>
@@ -22,6 +22,7 @@
   export default class SampleComponent extends Vue {
     @Action('sampleData', {namespace}) private sampleData: any;
     @State('sample') private sample!: SampleState;
+    @Getter('message', {namespace}) private message!: string;
 
     private mounted() {
       this.sampleData();

tests/unit/sample.spec.ts

@@ -1,8 +1,11 @@
 import { expect } from 'chai';
+import { ComponentOptions } from 'vue/types/options';
 import { shallowMount } from '@vue/test-utils';
 import { SampleComponent } from '@/app/sample/components';
+import Vue from 'vue';
 
 describe('SampleComponent.vue', () => {
+
   it('truthy test', () => {
     expect(true).eq(true);
   });