Nuxt(Typescript)でのvuexのメソッドの型定義について

Question

現在、以下のテンプレートを参考にNuxt-Typescriptにて
実装を行っています。

https://github.com/nuxt-community/typescript-template

そこでテンプレートに最初から配置されていた\myProject\store\index.tsを以下のように
修正するとbuild時にエラーが発生します。

仕様としては各記事のリンクを押した際に各記事のidを渡して内容を取得し表示しようと思っており
画面でボタンが押された際に、xxxx.vue内にて

this.$store.dispatch('getArticle', {payload: { id:"" }})

のような形でstoreのactionを呼び出したいと思っています。
困っているのは以下の該当メソッドのgetArticleの引数に何を設定したら良いか理解できていません。
エラーの内容から型の不一致でないかと考えているのですが
どこで定義されているどの型定義に合わせるべきかがわかりません
どなたか引数の設定内容（設定方法）、についてご教示頂けないでしょうか。

■index.ts

import { RootState, Article } from "../types";
import { MutationTree, ActionTree,ActionContext } from "vuex";
import axios from 'axios'
// export let state:RootState;
export const state = (): RootState => ({
  article:null,
  articles: []
})

export const mutations: MutationTree<RootState> = {
  setArticle(state: RootState, article: Article): void {
    state.article = article
  }
}

export const actions: ActionTree<RootState, any> = {

  async getArticle({ commit }, { payload }:any){
    let article:Article
    article.id = payload.id
    commit("setArticle", payload.id)
  },
}

■state.ts

import { Article } from "../types";

export interface RootState {
  article:Article,
  articles:Article[]
}

■build時出力ログ

[tsl] ERROR in C:Users\myProjec\store\index.ts(25,111)
      TS2322: Type '0' is not assignable to type '{ label: number; sent: () => any; trys: never[]; ops: never[]; }'.
                                                                                             friendly-errors 11:49:13
 ERROR  in C:Users\myProjec\store\index.ts
[tsl] ERROR in C:UsersmyProjec\store\index.ts(28,75)
      TS2345: Argument of type 'any' is not assignable to parameter of type 'never'.
                                                                                             friendly-errors 11:49:13

■package.json 抜粋

"dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "cross-env": "^5.2.0",
    "micro": "^9.3.3",
    "micro-route": "^2.5.0",
    "nuxt": "^2.3.4",
    "nuxt-class-component": "^1.2.1",
    "nuxt-property-decorator": "1.3.1",
    "vue-property-decorator": "^7.3.0",
    "vuex-class": "0.3.1"
  },
  "devDependencies": {
    "nodemon": "^1.18.9",
    "ts-loader": "5.3.3",
    "typescript": "3.2.4"
  }

Answer 1

問題となる箇所が4点あります。

1. state に初期値が設定されていない。初期状態を返す関数を代入する必要があります。
2. actions の型。エラーは起こりませんが型の恩恵を受けるために適切な型を設定する必要があります。
3. getArticle アクションの第2引数の型が未設定。anyで良いので自分で設定する必要があります。
4. getArticleMutate ミューテーションに Article[] 型の引数を渡していない。

以上の点を踏まえると、 store/index.ts は下記のような感じになります。

import { RootState, Article } from '../types'
import { MutationTree, ActionTree,ActionContext } from 'vuex'
import axios from 'axios'
import { fetchArticle } from '../api/article'

export const state = (): RootState => ({
  articles: []
})

export const mutations: MutationTree<RootState> = {
  getArticleMutate(state: RootState, article: Article[]): void {
    state.articles = article
  }
}
export const actions: ActionTree<RootState, RootState> = {
  async getArticle({ commit }, { payload }: any) {
    const article = await fetchArticle(payload.id)
    commit("getArticleMutate", article ? [article] : [])
  }
}

ただ、エラーとコードの行数が一致してないので憶測ですが、他の部分でもエラー出てそうな気がします。

Comments

[allazward]

yhg様、
ご回答ありがとうございます。
またお返事が遅れ申し訳ございません。
index.ts内、getArticleの引数、payloadにはidが設定されたオブジェクトが格納され
Articleオブジェクトのidに設定する予定にしていました。
またmutaions内のメソッドの名称、引数も変更させて頂いています。
その点変更させて頂き、またyhg様にご指摘頂いた点を反映し投稿を編集させて頂きました。
またエラーの行数についてどうしてもズレてしまうようです。
わかりづらく申し訳ありません。
ですがやはり同様のエラーがビルド時に発生するようです。
index.tsにはこれ以上のコードはなく、またコンソールに出ているエラーもこれ以上ない状態です。
>> 他の部分でもエラー
について他にお気づきになられたことがあれば教えてください

また一つ、質問させてください。
store/index.tsの以下のメソッド定義は
async getArticle({ commit }, { payload }:any)
同ファイルのメソッド定義
export const actions: ActionTree<RootState, any>
と一致していなければならないのでしょうか。
また上記
export const actions: ActionTree<RootState, any>
は、node_modules\vuex\types\index.d.ts内の
export interface ActionTree<S, R>
と言う定義に従わなければいけないという事でしょうか。

[yhg]

2つ目のエラーはgetArticleMutateの戻り値の型がvoidになってるのが原因ぽいですね。any型にすればエラー消えると思います。

ActionTree<S, R> の R は payload の型とは無関係で、 S にはルートモジュールの状態、R にはモジュールの状態の型が入ります。
そのためルートモジュールのアクションツリーの型は ActionTree<RootState, RootState> のようになり、ルートモジュールでないモジュールの場合は ActionTree<RootState, ExampleState> のようになります。
アクションの定義は下記のようになってます。

export type ActionHandler<S, R> = (this: Store<R>, injectee: ActionContext<S, R>, payload?: any) => any;

あとは
commit("setArticle", payload.id)
の部分で第2引数にArticle型の変数を渡してないぐらいしか問題見当たらないと思います。

[allazward]

yhg様
早速のお返事ありがとうございます。
単純化するため現在以下のように修正して検証してみました。

import { RootState, Article } from "../types";
import { MutationTree, ActionTree,ActionContext } from "vuex";
import axios from 'axios'

export const state = (): RootState => ({
article:null,
articles: []
})

// export const mutations: MutationTree<RootState> = {
// setArticle(state: RootState, article: Article): any {
// state.article = article
// return state
// }
// }

export const actions: ActionTree<RootState, any> = {

async getArticle({ commit }, { payload }:any) :Promise<any>{
// let article:Article
// article.id = payload.id
// commit("setArticle",{state,article})
// return {}
}
}

しかしやはり同様のエラーが出力されています。
また下記一文をコメントアウトすると正常にビルドが完了します。
async getArticle({ commit }, { payload }:any) :Promise<any>{}

どうやら上記一文に原因があるようですが、まだ特定できていません。
またどんなに行数を減らしてもエラー行数が変わりません。
async getArticle({ commit }, { payload }:any) {}
としても結果は同じエラー内容となります。
引き続き調査致しますが
yhg様の方で何かお気づきの点がございましたら
急ぎませんのでご指摘頂けないでしょうか。

[allazward]

yhg様、
現在、メソッドのgetArticleの修飾子 asyncを削除した結果ビルドに成功しています。
原因はこれだったようです。
実はgetArticleの定義はサンプルにあった以下のnuxtServerInitメソッドを参考に
定義いたしました。
(store/index.ts内では削除していましたが復帰させるとこのメソッドもエラーとなっています)
今回asyncが使用できない原因、また例えばgetArticle内で非同期処理を同期させたい場合
ここでasync/awaitを利用する方法が分かっていません
ご存知でしたらこの点教えて頂けないでしょうか。

export const actions: ActionTree<RootState, any> = {
getArticle({ commit }, { payload }:any) {
let article:Article
article.id = payload.id
commit("setArticle", article)
},
async nuxtServerInit({ commit }, { app }) {
const people: Article[] = await app.$axios.$get(
"./random-data.json"
)
commit("setPeople", people.slice(0, 10))
}
}

[yhg]

再現できるかtypescript-templateでプロジェクトを作って試してみましたが、問題なくasync/await使えました。
nuxt.jsなどの依存パッケージのバージョンが問題なのかもしれませんね。

[allazward]

yhg様、
ご回答ありがとうございます。
仰る通りtsconfigのパラメータを現在gitにあるサンプルの設定に合わせると
async/awaitもエラーは出力されないようです。
しかしtypescriptで記述されたvueファイル内のアノテーションが
機能しないなどの問題が出てくるため一旦ssrで実装するか否かを含め仕切り直したいと考えています。
（nuxt + typescript + ssrはうまくいってないという記事も見かけたため）
そこで一旦この件はクローズさせて頂きたいと思います。
ご検証、ご助言等色々と有難うございました。