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..217d6b4 --- /dev/null +++ b/template/middleware/people.ts @@ -0,0 +1,3 @@ +export default async function({store}){ + await store.dispatch('setPeople') +} \ No newline at end of file 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 6380a67..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 }}', @@ -42,5 +23,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 821352c..6155b30 100644 --- a/template/store/index.ts +++ b/template/store/index.ts @@ -1,31 +1,33 @@ -import { getPeople } from '~/api/people' +import {Actions, Getters, IPerson, IState, Mutations} from '~/types' +import axios from '~/plugins/axios' 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 = { - selectedPerson: state => { - const p = state.people.find(person => person.id === state.selected) +export const getters:Getters = { + 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 = { - async nuxtServerInit({ commit }) { - commit('setPeople', await getPeople(3)) +export const actions:Actions = { + async setPeople({ commit }) { + const people = (await axios.get('/random-data.json')).data.slice(0,3); + commit('setPeople', people); }, - 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