From cedb17b9a5975f6d17272244fe1cf3e96cd5060e Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 12 Feb 2018 18:14:01 +0300 Subject: [PATCH 1/4] impowing Vuex Store typings --- template/store/index.ts | 17 +++++++++-------- template/types/index.d.ts | 25 +++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 template/types/index.d.ts diff --git a/template/store/index.ts b/template/store/index.ts index 821352c..4de0f10 100644 --- a/template/store/index.ts +++ b/template/store/index.ts @@ -1,31 +1,32 @@ import { getPeople } from '~/api/people' +import {Actions, Getters, IPerson, IState, Mutations} from '~/types' export const state = () => ({ selected: 1, people: [] -}) +} as IState) -export const mutations = { - select(state, id) { +export const mutations:Mutations = { + select(state:IState, id:number) { state.selected = id }, - setPeople(state, people) { + setPeople(state:IState, people:IPerson[]) { state.people = people } } -export const getters = { +export const getters:Getters = { selectedPerson: state => { - const p = state.people.find(person => person.id === state.selected) + const p = state.people.find((person:IPerson) => person.id === state.selected) return p ? p : { first_name: 'Please,', last_name: 'select someone' } } } -export const actions = { +export const actions:Actions = { async nuxtServerInit({ commit }) { commit('setPeople', await getPeople(3)) }, - select({ commit }, id) { + select({ commit }, id:number) { commit('select', id) } } diff --git a/template/types/index.d.ts b/template/types/index.d.ts new file mode 100644 index 0000000..645f3db --- /dev/null +++ b/template/types/index.d.ts @@ -0,0 +1,25 @@ +import {GetterTree, MutationTree, ActionTree} from "vuex" + +export interface IPerson { + id: number + first_name: string, + last_name: string, + contact: object, + gender: string, + ip_address: string, + avatar: string, + address: string, + country: string, + postalCode: string, + state: string, + street: string +} + +export interface IState { + selected: number, + people: IPerson[] +} + +export type Getters = GetterTree +export type Mutations = MutationTree +export type Actions = ActionTree \ No newline at end of file From 1b06b14c544a10bdba5cbf5248b6c1d0ad2216f4 Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 12 Feb 2018 18:45:42 +0300 Subject: [PATCH 2/4] changing api to use middleware folder --- template/api/people.ts | 4 ---- template/middleware/people.ts | 3 +++ template/nuxt.config.js | 3 +++ template/store/index.ts | 7 ++++--- 4 files changed, 10 insertions(+), 7 deletions(-) delete mode 100644 template/api/people.ts create mode 100644 template/middleware/people.ts diff --git a/template/api/people.ts b/template/api/people.ts deleted file mode 100644 index 4479936..0000000 --- a/template/api/people.ts +++ /dev/null @@ -1,4 +0,0 @@ -import axios from '~/plugins/axios' - -export const getPeople = async (total = 10) => - (await axios.get('/random-data.json')).data.slice(0, total) diff --git a/template/middleware/people.ts b/template/middleware/people.ts new file mode 100644 index 0000000..888e50d --- /dev/null +++ b/template/middleware/people.ts @@ -0,0 +1,3 @@ +export default async function({store}){ + await store.dispatch('getPeople') +} \ No newline at end of file diff --git a/template/nuxt.config.js b/template/nuxt.config.js index 6380a67..be71345 100644 --- a/template/nuxt.config.js +++ b/template/nuxt.config.js @@ -42,5 +42,8 @@ module.exports = { build: { vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component'] }, + router: { + middleware: 'people' + }, modules: ['~/modules/typescript.js'] } diff --git a/template/store/index.ts b/template/store/index.ts index 4de0f10..01d8e27 100644 --- a/template/store/index.ts +++ b/template/store/index.ts @@ -1,5 +1,5 @@ -import { getPeople } from '~/api/people' import {Actions, Getters, IPerson, IState, Mutations} from '~/types' +import axios from '~/plugins/axios' export const state = () => ({ selected: 1, @@ -23,8 +23,9 @@ export const getters:Getters = { } export const actions:Actions = { - async nuxtServerInit({ commit }) { - commit('setPeople', await getPeople(3)) + async getPeople({ commit }) { + const people = (await axios.get('/random-data.json')).data.slice(0,3); + commit('setPeople', people); }, select({ commit }, id:number) { commit('select', id) From 7688a67771925c65a6e495853edb8c64c29361ba Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 12 Feb 2018 18:59:46 +0300 Subject: [PATCH 3/4] Unifying the names in the store actions --- template/middleware/people.ts | 2 +- template/store/index.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/template/middleware/people.ts b/template/middleware/people.ts index 888e50d..217d6b4 100644 --- a/template/middleware/people.ts +++ b/template/middleware/people.ts @@ -1,3 +1,3 @@ export default async function({store}){ - await store.dispatch('getPeople') + await store.dispatch('setPeople') } \ No newline at end of file diff --git a/template/store/index.ts b/template/store/index.ts index 01d8e27..6155b30 100644 --- a/template/store/index.ts +++ b/template/store/index.ts @@ -16,14 +16,14 @@ export const mutations:Mutations = { } export const getters:Getters = { - selectedPerson: state => { + selectedPerson: (state:IState) => { const p = state.people.find((person:IPerson) => person.id === state.selected) return p ? p : { first_name: 'Please,', last_name: 'select someone' } } } export const actions:Actions = { - async getPeople({ commit }) { + async setPeople({ commit }) { const people = (await axios.get('/random-data.json')).data.slice(0,3); commit('setPeople', people); }, From 7a855d4fcd46ab5e80606ab19e47e1ab7d174e2e Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 12 Feb 2018 21:56:23 +0300 Subject: [PATCH 4/4] moving baseUrl detection into a separate module --- template/modules/baseUrl.js | 24 ++++++++++++++++++++++++ template/nuxt.config.js | 23 ++--------------------- 2 files changed, 26 insertions(+), 21 deletions(-) create mode 100644 template/modules/baseUrl.js diff --git a/template/modules/baseUrl.js b/template/modules/baseUrl.js new file mode 100644 index 0000000..d75c210 --- /dev/null +++ b/template/modules/baseUrl.js @@ -0,0 +1,24 @@ +const parseArgs = require('minimist') +const argv = parseArgs(process.argv.slice(2), { + alias: { + H: 'hostname', + p: 'port' + }, + string: ['H'], + unknown: parameter => false +}) + +const port = + argv.port || + process.env.PORT || + process.env.npm_package_config_nuxt_port || + '3000' +const host = + argv.hostname || + process.env.HOST || + process.env.npm_package_config_nuxt_host || + 'localhost' + +module.exports = { + port, host +} \ No newline at end of file diff --git a/template/nuxt.config.js b/template/nuxt.config.js index be71345..4348433 100644 --- a/template/nuxt.config.js +++ b/template/nuxt.config.js @@ -1,26 +1,7 @@ -const parseArgs = require('minimist') -const argv = parseArgs(process.argv.slice(2), { - alias: { - H: 'hostname', - p: 'port' - }, - string: ['H'], - unknown: parameter => false -}) - -const port = - argv.port || - process.env.PORT || - process.env.npm_package_config_nuxt_port || - '3000' -const host = - argv.hostname || - process.env.HOST || - process.env.npm_package_config_nuxt_host || - 'localhost' +const baseUrl = require('./modules/baseUrl') module.exports = { env: { - baseUrl: process.env.BASE_URL || `http://${host}:${port}` + baseUrl: process.env.BASE_URL || `http://${baseUrl.host}:${baseUrl.port}` }, head: { title: '{{ name }}',