Nuxt + TypeScript で Vuex を扱うために ～ vuex-module-decorators

import { Store } from 'vuex'
import { initializeStores } from '~/utils/store-accessor'
const initializer = (store: Store<any>) => initializeStores(store)
export const plugins = [initializer]
export * from '~/utils/store-accessor'

// 後述の ~/store/todos.ts で使う型定義
export interface Todo {
  id: number
  text: string
  done: boolean
}

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'
import { Todo } from '~/models/Todo'

// stateFactory: true → Vuex をモジュールモードで扱うために指定
@Module({ stateFactory: true, namespaced: true, name: 'todos' })
export default class Todos extends VuexModule {
  todos: Todo[] = []

  /**
   * Todo を追加する
   * @param text Todo テキスト
   */
  @Mutation
  addTodo(text: string) {
    const todos: Todo[] = this.todos
    // Todo を作成
    const todo: Todo = {
      // リストがない場合、id = 0
      // リストがある場合、id = リストの最終要素の id + 1
      id: todos.length === 0 ? 0 : todos[todos.length - 1].id + 1,
      text,
      done: false
    }
    // リストに Todo を追加
    this.todos.push(todo)
  }

  /**
   * Todo を削除する
   * @param todo 削除する Todo インスタンス
   */
  @Mutation
  remove(todo: Todo) {
    this.todos.splice(this.todos.indexOf(todo), 1)
  }

  /**
   * Todo の done（完了状態）を切り替える
   * @param todo 完了状態を切り替える対象の Todo インスタンス
   */
  @Mutation
  toggle(todo: Todo) {
    todo.done = !todo.done
  }
}

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import Todos from '~/store/todos'

// eslint-disable-next-line import/no-mutable-exports ← 必要であれば
let todosStore: Todos
// let someStore: Something

function initializeStores(store: Store<any>): void {
  todosStore = getModule(Todos, store)
  // someStore = getModule(Something, store)
}

export { initializeStores, todosStore /*, someStore*/ }

import Vue from 'vue'
import { todosStore } from '~/store'

export default Vue.extend({
  computed: {
    todos() {
      return todosStore.todos
    }
  },
  methods: {
    addTodo(e): void {
      todosStore.add(e.target.value)
      e.target.value = ''
    },
    remove(todo: Todo) {
      todosStore.remove(todo)
    },
    toggle(todo: Todo) {
      todosStore.toggle(todo)
    }
  }
})