initial commit

Author: eladcandroid

README.md

@@ -9,11 +9,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "vue": "^2.5.13",
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^6.0.0",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "vuex-class": "^0.3.0"
   },
   "devDependencies": {
     "@types/jest": "^22.0.1",
@@ -28,11 +30,6 @@
     "ts-jest": "^22.0.1",
     "vue-template-compiler": "^2.5.13"
   },
-  "babel": {
-    "presets": [
-      "@vue/app"
-    ]
-  },
   "postcss": {
     "plugins": {
       "autoprefixer": {}

package-lock.json

@@ -0,0 +1,69 @@
+<template>
+    <div class="container">
+        <div v-if="profile.user">
+            <p>
+                Full name: {{ fullName }}
+            </p>
+            <p>
+                Email: {{ email }}
+            </p>
+        </div>
+        <div v-if="profile.error">
+            Oops an error occured
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+  import {Component, Prop, Vue} from 'vue-property-decorator';
+  import {State, Action, Getter} from 'vuex-class';
+  import {ProfileState} from '../store/profile/types';
+  const namespace: string = 'profile';
+
+  @Component
+  export default class HelloWorld extends Vue {
+
+    @Prop() private msg!: string;
+
+    constructor() {
+      super();
+    }
+
+    @State('profile') profile: ProfileState;
+    @Action('fetchData', {namespace}) fetchData: any;
+    @Getter('fullName', {namespace}) fullName: string;
+
+    mounted() {
+      // fetching data as soon as the component's been mounted
+      this.fetchData();
+    }
+
+    // computed variable based on user's email
+    get email() {
+      const user = this.profile && this.profile.user;
+      return (user && user.email) || '';
+    }
+
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+    h3 {
+        margin: 40px 0 0;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin: 0 10px;
+    }
+
+    a {
+        color: #42b983;
+    }
+</style>

package.json

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
-import store from './store';
+import store from './store/store';
 
 Vue.config.productionTip = false;
 

src/components/HelloWorld.vue

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { profile } from './profile/index';
+import { RootState } from './types';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store<RootState>({
+  state: {
+    version: '1.0.0', // a simple property
+  },
+  modules: {
+    profile,
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  },
+});

src/components/Profile.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="home">
     <img src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <Profile msg="Welcome to Your Vue.js + TypeScript App"/>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+import Profile from '@/components/Profile.vue'; // @ is an alias to /src
 
 @Component({
   components: {
-    HelloWorld,
+    Profile,
   },
 })
 export default class Home extends Vue {}

src/main.ts

@@ -1,5 +1,5 @@
 import { shallow } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
+import HelloWorld from '@/components/Profile.vue';
 
 describe('HelloWorld.vue', () => {
   it('renders props.msg when passed', () => {