Edited README & Fixed tslint errors & bump cli version to beta 7

Author: eladcandroid

README.md

@@ -0,0 +1,3 @@
+**VueJS Typescript with Vuex support using the Vue CLI 3**
+
+Made from this great tutorial: https://codeburst.io/vuex-and-typescript-3427ba78cfa8

package.json

@@ -19,10 +19,10 @@
   },
   "devDependencies": {
     "@types/jest": "^22.0.1",
-    "@vue/cli-plugin-babel": "^3.0.0-beta.6",
-    "@vue/cli-plugin-typescript": "^3.0.0-beta.6",
-    "@vue/cli-plugin-unit-jest": "^3.0.0-beta.6",
-    "@vue/cli-service": "^3.0.0-beta.6",
+    "@vue/cli-plugin-babel": "^3.0.0-beta.7",
+    "@vue/cli-plugin-typescript": "^3.0.0-beta.7",
+    "@vue/cli-plugin-unit-jest": "^3.0.0-beta.7",
+    "@vue/cli-service": "^3.0.0-beta.7",
     "@vue/test-utils": "^1.0.0-beta.10",
     "babel-core": "^7.0.0-0",
     "node-sass": "^4.7.2",

src/components/Profile.vue

@@ -22,17 +22,16 @@
 
   @Component
   export default class HelloWorld extends Vue {
+    @State('profile') profile: ProfileState;
+    @Action('fetchData', {namespace}) fetchData: any;
+    @Getter('fullName', {namespace}) fullName: string;
 
     @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();

src/store/profile/actions.ts

@@ -0,0 +1,20 @@
+
+import { ActionTree } from 'vuex';
+import axios from 'axios';
+import { ProfileState, User } from './types';
+import { RootState } from '../types';
+
+
+export const actions: ActionTree<ProfileState, RootState> = {
+  fetchData({ commit }): any {
+    axios({
+      url: 'https://next.json-generator.com/api/json/get/41AeRPqnE',
+    }).then((response) => {
+      const payload: User = response && response.data;
+      commit('profileLoaded', payload);
+    }, (error) => {
+      console.log(error);
+      commit('profileError');
+    });
+  },
+};

src/store/profile/getters.ts

@@ -0,0 +1,13 @@
+import { GetterTree } from 'vuex';
+import { ProfileState } from './types';
+import { RootState } from '../types';
+
+export const getters: GetterTree<ProfileState, RootState> = {
+  fullName(state): string {
+    const { user } = state;
+    console.log('user', user);
+    const firstName = (user && user.firstName) || '';
+    const lastName = (user && user.lastName) || '';
+    return `${firstName} ${lastName}`;
+  },
+};

src/store/profile/index.ts

@@ -0,0 +1,21 @@
+import { Module } from 'vuex';
+import { getters } from './getters';
+import { actions } from './actions';
+import { mutations } from './mutations';
+import { ProfileState } from './types';
+import { RootState } from '../types';
+
+export const state: ProfileState = {
+  user: undefined,
+  error: false,
+};
+
+const namespaced: boolean = true;
+
+export const profile: Module<ProfileState, RootState> = {
+  namespaced,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/store/profile/mutations.ts

@@ -0,0 +1,13 @@
+import { MutationTree } from 'vuex';
+import { ProfileState, User } from './types';
+
+export const mutations: MutationTree<ProfileState> = {
+  profileLoaded(state, payload: User) {
+    state.error = false;
+    state.user = payload;
+  },
+  profileError(state) {
+    state.error = true;
+    state.user = undefined;
+  },
+};

src/store/profile/types.ts

@@ -0,0 +1,12 @@
+
+export interface User {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone?: string;
+}
+
+export interface ProfileState {
+  user?: User;
+  error: boolean;
+}

src/store/types.ts

@@ -0,0 +1,3 @@
+export interface RootState {
+  version: string;
+}

tslint.json

@@ -10,6 +10,7 @@
     "ordered-imports": false,
     "object-literal-sort-keys": false,
     "no-consecutive-blank-lines": false,
-    "no-console": [false]
+    "no-console": [false],
+    "member-access": [true, "no-public"]
   }
 }