Improving Vuex Store typings

template/middleware/people.ts

@@ -0,0 +1,3 @@
+export default async function({store}){
+  await store.dispatch('setPeople')
+}

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
+}

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']
 }

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)
   }
 }

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<IState, any>
+export type Mutations = MutationTree<IState>
+export type Actions = ActionTree<IState, any>