From 44c0ab78a29c9cbd512386c9e869c623253d8a93 Mon Sep 17 00:00:00 2001 From: Quique Fdez Guerra Date: Tue, 2 Jan 2018 10:55:22 +0100 Subject: [PATCH] Add more realistic TypeScript example --- examples/typescript/components/Card.vue | 8 ++- examples/typescript/pages/index.vue | 15 +++-- examples/typescript/store/index.ts | 48 ++++++-------- examples/typescript/store/modules/people.ts | 70 +++++++++++++++++++++ examples/typescript/store/root.ts | 28 +++++++++ examples/typescript/tsconfig.json | 3 +- 6 files changed, 136 insertions(+), 36 deletions(-) create mode 100644 examples/typescript/store/modules/people.ts create mode 100644 examples/typescript/store/root.ts diff --git a/examples/typescript/components/Card.vue b/examples/typescript/components/Card.vue index 2886ffa17a..efce3253e2 100644 --- a/examples/typescript/components/Card.vue +++ b/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 } \ No newline at end of file diff --git a/examples/typescript/pages/index.vue b/examples/typescript/pages/index.vue index 567e415ebc..e53adb6b71 100644 --- a/examples/typescript/pages/index.vue +++ b/examples/typescript/pages/index.vue @@ -16,8 +16,13 @@ diff --git a/examples/typescript/store/index.ts b/examples/typescript/store/index.ts index bfffcd5175..a28a26ac6d 100644 --- a/examples/typescript/store/index.ts +++ b/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 = () => ({ - selected: 1, - people: [] -}); +// more info about store: https://vuex.vuejs.org/en/core-concepts.html +// structure of the store: + // 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 = { - select(state, id) { - state.selected = id; - }, - setPeople(state, people) { - state.people = people; - } +export const modules = { + [people.name]: people }; -export const getters = { - selectedPerson: state => { - const p = state.people.find(person => person.id === state.selected); - return p ? p : { first_name: "Please,", last_name: "select someone" }; - } -}; +interface ModulesStates { + people: people.State; +} -export const actions = { - async nuxtServerInit({ commit }) { - const response = await axios.get("/random-data.json"); - const people = response.data.slice(0, 10); - commit("setPeople", people); - }, - select({ commit }, id) { - commit("select", id); - } -}; +export type RootState = root.State & ModulesStates; + +export const state = root.state; +export const getters = root.getters; +export const actions = root.actions; +export const mutations = root.mutations; \ No newline at end of file diff --git a/examples/typescript/store/modules/people.ts b/examples/typescript/store/modules/people.ts new file mode 100644 index 0000000000..9cbf667c16 --- /dev/null +++ b/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 = { + 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 extends ActionTree { + select(context: ActionContext, id: number): void; +} + +export const actions: Actions = { + select({ commit }, id: number) { + commit(types.SELECT, id); + } +}; + +export const mutations: MutationTree = { + [types.SELECT](state, id: number) { + state.selected = id; + }, + [types.SET](state, people: Person[]) { + state.people = people; + } +}; + diff --git a/examples/typescript/store/root.ts b/examples/typescript/store/root.ts new file mode 100644 index 0000000000..902b539602 --- /dev/null +++ b/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 = {}; + +export interface Actions extends ActionTree { + nuxtServerInit(context: ActionContext): void; +} + +export const actions: Actions = { + 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 = {}; + + diff --git a/examples/typescript/tsconfig.json b/examples/typescript/tsconfig.json index 557fd275fa..25539ebd12 100644 --- a/examples/typescript/tsconfig.json +++ b/examples/typescript/tsconfig.json @@ -23,7 +23,8 @@ "~/middleware/*": ["./middleware/*"], "~/pages/*": ["./pages/*"], "~/plugins/*": ["./plugins/*"], - "~/static/*": ["./static/*"] + "~/static/*": ["./static/*"], + "~/store/*": ["./store/*"] } } }