Merge pull request #2490 from CKGrafico/dev

Add more realistic TypeScript example

examples/typescript/components/Card.vue

@@ -12,11 +12,15 @@
 import Vue from 'vue'
 import Component from 'nuxt-class-component'
 import { Prop } from 'vue-property-decorator'
-import { Action } from 'vuex-class'
+import { Action, namespace } from 'vuex-class'
+
+import * as people from '~/store/modules/people';
+
+const PeopleAction = namespace(people.name, Action);
 
 @Component({})
 export default class Card extends Vue {
   @Prop() person
-  @Action select
+  @PeopleAction select
 }
 </script>

examples/typescript/pages/index.vue

@@ -16,8 +16,13 @@
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'nuxt-class-component'
-import Card from '~/components/Card'
+import Card from '~/components/Card.vue'
-import { State, Getter } from 'vuex-class'
+import { State, Getter, namespace } from 'vuex-class'
+
+import * as people from '~/store/modules/people';
+
+const PeopleState = namespace(people.name, State);
+const PeopleGetter = namespace(people.name, Getter);
 
 @Component({
   components: {
@@ -25,8 +30,8 @@ import { State, Getter } from 'vuex-class'
   }
 })
 export default class extends Vue {
-  @State selected
+  @PeopleState selected
-  @State people
+  @PeopleState people
-  @Getter selectedPerson
+  @PeopleGetter selectedPerson
 }
 </script>

examples/typescript/store/index.ts

@@ -1,33 +1,25 @@
-import axios from "~/plugins/axios";
+import * as root from "./root";
+import * as people from "./modules/people";
 
-export const state = () => ({
+// more info about store: https://vuex.vuejs.org/en/core-concepts.html
-  selected: 1,
+// structure of the store:
-  people: []
+    // types: Types that represent the keys of the mutations to commit
-});
+    // state: The information of our app, we can get or update it.
+    // getters: Get complex information from state
+    // action: Sync or async operations that commit mutations
+    // mutations: Modify the state
 
-export const mutations = {
+export const modules = {
-  select(state, id) {
+    [people.name]: people
-    state.selected = id;
-  },
-  setPeople(state, people) {
-    state.people = people;
-  }
 };
 
-export const getters = {
+interface ModulesStates {
-  selectedPerson: state => {
+    people: people.State;
-    const p = state.people.find(person => person.id === state.selected);
+}
-    return p ? p : { first_name: "Please,", last_name: "select someone" };
-  }
-};
 
-export const actions = {
+export type RootState = root.State & ModulesStates;
-  async nuxtServerInit({ commit }) {
+
-    const response = await axios.get("/random-data.json");
+export const state = root.state;
-    const people = response.data.slice(0, 10);
+export const getters = root.getters;
-    commit("setPeople", people);
+export const actions = root.actions;
-  },
+export const mutations = root.mutations;
-  select({ commit }, id) {
-    commit("select", id);
-  }
-};

examples/typescript/store/modules/people.ts

@@ -0,0 +1,70 @@
+import { ActionTree, MutationTree, GetterTree, ActionContext } from "vuex";
+import { RootState } from "store";
+
+export const name = "people";
+
+export const types = {
+    SELECT: "SELECT",
+    SET: "SET"
+};
+
+export interface PersonContact {
+    email: string;
+    phone: string;
+}
+
+export interface PersonAddress {
+    city: string;
+    country: string;
+    postalCode: string;
+    state: string;
+    street: string;
+}
+
+export interface Person {
+    id: number;
+    first_name: string;
+    last_name: string;
+    contact: PersonContact;
+    gender: string;
+    ip_address: string;
+    avatar: string;
+    addres: PersonAddress;
+}
+
+export interface State {
+    selected: number;
+    people: Person[];
+}
+
+export const state = (): State => ({
+    selected: 1,
+    people: []
+});
+
+export const getters: GetterTree<State, RootState> = {
+    selectedPerson: state => {
+        const p = state.people.find(person => person.id === state.selected);
+        return p ? p : { first_name: "Please,", last_name: "select someone" };
+    }
+};
+
+export interface Actions<S, R> extends ActionTree<S, R> {
+    select(context: ActionContext<S, R>, id: number): void;
+}
+
+export const actions: Actions<State, RootState> = {
+    select({ commit }, id: number) {
+        commit(types.SELECT, id);
+      }
+};
+
+export const mutations: MutationTree<State> = {
+    [types.SELECT](state, id: number) {
+        state.selected = id;
+    },
+    [types.SET](state, people: Person[]) {
+        state.people = people;
+    }
+};
+

examples/typescript/store/root.ts

@@ -0,0 +1,28 @@
+import { GetterTree, ActionContext, ActionTree, MutationTree } from "vuex";
+import axios from "~/plugins/axios";
+import { RootState } from "store";
+import * as people from "./modules/people";
+
+export const types = {};
+
+export interface State {}
+
+export const state = (): State => ({});
+
+export const getters: GetterTree<State, RootState> = {};
+
+export interface Actions<S, R> extends ActionTree<S, R> {
+    nuxtServerInit(context: ActionContext<S, R>): void;
+}
+
+export const actions: Actions<State, RootState> = {
+    async nuxtServerInit({ commit }) {
+        const response = await axios.get("/random-data.json");
+        const staticPeople = response.data.slice(0, 10);
+        commit(`${people.name}/${people.types.SET}`, staticPeople, { root: true });
+      }
+};
+
+export const mutations: MutationTree<State> = {};
+
+

examples/typescript/tsconfig.json

@@ -23,7 +23,8 @@
       "~/middleware/*": ["./middleware/*"],
       "~/pages/*": ["./pages/*"],
       "~/plugins/*": ["./plugins/*"],
-      "~/static/*": ["./static/*"]
+      "~/static/*": ["./static/*"],
+      "~/store/*": ["./store/*"]
     }
   }
 }