Vuex Module that are strongly typed with TypeScript

Author: renoirb

lib/models/feed.ts

@@ -0,0 +1,12 @@
+export interface Feed {
+  comments_count: number
+  domain: string
+  id: number
+  points: number
+  time: number | Date | undefined
+  time_ago: string
+  title: string
+  type: string
+  url: string
+  user: string
+}

lib/models/index.ts

@@ -0,0 +1,4 @@
+export * from "./feed"
+export * from "./item"
+export * from "./store"
+export * from "./user"

lib/models/item.ts

@@ -0,0 +1,18 @@
+export interface Items {
+  [key: number]: Item
+}
+
+export interface Item {
+  comments: any[]
+  comments_count: number
+  content: string
+  domain: string
+  id: number
+  points: number
+  time: number | Date | undefined
+  time_ago: string
+  title: string
+  type: string
+  url: string
+  user: string
+}

lib/models/store.ts

@@ -0,0 +1,20 @@
+import { User } from "./user"
+import { Feed } from "./feed"
+import { Items } from "./item"
+
+export interface Dictionary<T> {
+  [key: string]: T
+}
+
+// tslint:disable-next-line: no-empty-interface
+export interface StoreStateRoot {}
+
+export interface StoreStateUser {
+  items: Dictionary<User>
+}
+
+export interface StoreStateFeed {
+  feeds: Dictionary<Feed>
+  items: Items
+  selected: number | null
+}

lib/models/user.ts

@@ -0,0 +1,9 @@
+// export interface Users {
+//   [key: string]: User
+// }
+export interface User {
+  created: string
+  created_time: number
+  id: string
+  karma: number
+}

nuxt.config.ts

@@ -21,10 +21,6 @@ if (enableWorkbox) {
 }
 
 const runtimeSwitches: { [key: string]: string | boolean } = {
-  NODE_ENV,
-  NUXT_ENV_LOG_LEVEL,
-  NUXT_ENV_ENABLE_WORKBOX,
-  NUXT_ENV_API_URL,
   apiBaseUrl,
   enableWorkbox,
   isDev,

pages/_feed/_page.vue

@@ -20,9 +20,16 @@ import { Component, Watch, Vue } from "vue-property-decorator"
 import { Transition } from "@nuxt/vue-app"
 import { Route } from "vue-router"
 
-const Item = () => import(/* webpackChunkName: "components--item" */ '~/components/item.vue')
-const ItemListNav = () => import(/* webpackChunkName: "components--item-list-nav" */ '~/components/item-list-nav.vue')
-const LazyWrapper = () => import(/* webpackChunkName: "components--lazy-wrapper" */ '~/components/lazy-wrapper.vue')
+const Item = () =>
+  import(/* webpackChunkName: "components--item" */ "~/components/item.vue")
+const ItemListNav = () =>
+  import(
+    /* webpackChunkName: "components--item-list-nav" */ "~/components/item-list-nav.vue"
+  )
+const LazyWrapper = () =>
+  import(
+    /* webpackChunkName: "components--lazy-wrapper" */ "~/components/lazy-wrapper.vue"
+  )
 
 import { feeds, validFeeds } from "~/common/api"
 
@@ -41,7 +48,7 @@ import { feeds, validFeeds } from "~/common/api"
     return validFeeds.includes(feed)
   },
   fetch({ store, params: { feed, page = 1 } }) {
-    return store.dispatch("FETCH_FEED", { feed, page })
+    return store.dispatch("feed/FETCH_FEED", { feed, page })
   },
   head(this: Page) {
     return {
@@ -57,10 +64,9 @@ export default class Page extends Vue {
     | Transition
     | ((to: Route, from: Route) => string) = "slide-right"
 
-
   get feed() {
     const params = this.$route.params
-    const { feed = 'news' } = params
+    const { feed = "news" } = params
     return feed
   }
 
@@ -76,14 +82,14 @@ export default class Page extends Vue {
   }
 
   get pageData() {
-    const feed = this.feed || 'news'
+    const feed = this.feed || "news"
     const page = this.page
-    const data = this.$store.state.feeds[feed][page]
+    const data = this.$store.state.feed.feeds[feed][page]
     return data
   }
 
   get displayedItems() {
-    const items = this.$store.state.items
+    const items = this.$store.state.feed.items
     return this.pageData.map(id => items[id])
   }
 
@@ -104,7 +110,7 @@ export default class Page extends Vue {
 
     // Prefetch next page
     this.$store
-      .dispatch("FETCH_FEED", {
+      .dispatch("feed/FETCH_FEED", {
         feed: this.feed,
         page: this.page + 1,
         prefetch: true

pages/index.tsx

@@ -3,6 +3,9 @@ import { validFeeds } from "~/common/api"
 
 @Component({
   fetch({ redirect }) {
+    // #DefaultRootRedirect
+    // If you wondered how it knows how to redirect from / to /news
+    // ... this is why
     redirect("/" + validFeeds[0])
   }
 })

pages/item/_id.vue

@@ -45,7 +45,7 @@ const LazyWrapper = () => import(/* webpackChunkName: "components--lazy-wrapper"
     }
   },
   fetch({ store, params: { id } }) {
-    return store.dispatch("FETCH_ITEM", { id })
+    return store.dispatch("feed/FETCH_ITEM", { id })
   }
 })
 export default class ItemView extends Vue {
@@ -54,7 +54,7 @@ export default class ItemView extends Vue {
   }
 
   get item() {
-    return this.$store.state.items[this.id]
+    return this.$store.state.feed.items[this.id]
   }
 }
 </script>

pages/user/_id.vue

@@ -30,8 +30,10 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator"
 
-const LazyWrapper = () => import(/* webpackChunkName: "components--lazy-wrapper" */ '~/components/lazy-wrapper.vue')
-
+const LazyWrapper = () =>
+  import(
+    /* webpackChunkName: "components--lazy-wrapper" */ "~/components/lazy-wrapper.vue"
+  )
 
 @Component({
   components: {
@@ -46,12 +48,12 @@ const LazyWrapper = () => import(/* webpackChunkName: "components--lazy-wrapper"
       params: { id }
     }
   }) {
-    return store.dispatch("FETCH_USER", { id })
+    return store.dispatch("user/FETCH_USER", { id })
   }
 })
 export default class UserView extends Vue {
   get user() {
-    return this.$store.state.users[this.$route.params.id]
+    return this.$store.state.user.items[this.$route.params.id]
   }
 }
 </script>

store/feed.ts

@@ -0,0 +1,114 @@
+import { ActionTree, MutationTree, GetterTree } from "vuex"
+import Vue from "vue"
+
+import { StoreStateRoot, StoreStateFeed, Item } from "~/lib/models"
+
+import { apiBasePath } from "~/store"
+import { lazy } from "~/common/utils"
+
+import { validFeeds } from "~/common/api"
+
+export const namespaced = true
+
+export const name = "feed"
+
+export { StoreStateFeed as State }
+
+export const types = {
+  SELECT: "SELECT",
+  FEED: "SET_FEED",
+  ITEM: "SET_ITEM",
+  ITEMS: "SET_ITEMS"
+}
+
+export const state = (): StoreStateFeed => {
+  const out: StoreStateFeed = {
+    feeds: {
+      // [page: number] : [ [id: number] ]
+    },
+    items: {
+      // [id: number]: Item
+    },
+    selected: null
+  }
+
+  validFeeds.forEach((feed: string) => {
+    // @ts-ignore
+    out.feeds[feed] = {}
+  })
+
+  return out
+}
+
+export const actions: ActionTree<StoreStateFeed, StoreStateRoot> = {
+  FETCH_FEED(actionContext, { feed, page, prefetch = false }) {
+    // Don't priorotize already fetched feeds
+    if (
+      actionContext.state.feeds[feed][page] &&
+      actionContext.state.feeds[feed][page].length
+    ) {
+      prefetch = true
+    }
+    if (!prefetch) {
+      if ((this as any).feedCancelSource) {
+        ;(this as any).feedCancelSource.cancel(
+          "prioritize feed: " + feed + " page: " + page
+        )
+      }
+    }
+
+    return lazy(
+      items => {
+        const ids = items.map(item => item.id)
+        actionContext.commit(types.FEED, { feed, ids, page })
+        actionContext.commit(types.ITEMS, { items })
+      },
+      () =>
+        (this as any).$axios.$get(`${apiBasePath}/${feed}/${page}.json`, {
+          cancelToken:
+            (this as any).feedCancelSource &&
+            (this as any).feedCancelSource.token
+        }),
+      (actionContext.state.feeds[feed][page] || []).map(
+        id => actionContext.state.items[id]
+      )
+    )
+  },
+
+  FETCH_ITEM(actionContext, { id }) {
+    return lazy(
+      item => {
+        actionContext.commit(types.SELECT, item.id)
+        actionContext.commit(types.ITEM, { item })
+      },
+      () => (this as any).$axios.$get(`${apiBasePath}/item/${id}.json`),
+      Object.assign(
+        { id, loading: true, comments: [] },
+        actionContext.state.items[id]
+      )
+    )
+  }
+}
+
+export const getters: GetterTree<StoreStateFeed, StoreStateRoot> = {}
+
+export const mutations: MutationTree<StoreStateFeed> = {
+  [types.FEED]: (mutationStateContext, { feed, ids, page }) => {
+    Vue.set(mutationStateContext.feeds[feed], page, ids)
+  },
+  [types.ITEM]: (mutationStateContext, { item }: { item: Item }) => {
+    if (item) {
+      Vue.set(mutationStateContext.items as Item[], item.id, item)
+    }
+  },
+  [types.ITEMS]: (mutationStateContext, { items }: { items: Item[] }) => {
+    items.forEach(item => {
+      if (item) {
+        Vue.set(mutationStateContext.items as Item[], item.id, item)
+      }
+    })
+  },
+  [types.SELECT](mutationStateContext, id: number | null = null) {
+    mutationStateContext.selected = id
+  }
+}