質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • Vue.js

    645questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • TypeScript

    319questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

vuex モジュールに型情報を追加する

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 302

nihcika

score 17

import SheetList from '../../../../data/sheet/sheetList'
var sheetList = new SheetList()

export const mainAreaModule = {
  namespaced: true,
  state: {
    sheetList: sheetList.getSheetAll()
  },
  mutations: {
    'SEARCH_SHEET'(state, searchWord : string) {
      state.sheetList = sheetList.getSheetSearch(searchWord)
    },
  },
  actions: {
    'SEARCH_SHEET'( { commit } , searchWord : string) {
      commit('SEARCH_SHEET', searchWord)  
    }
  },
  getters:{
    'GET_SHEET_LIST': state => {return state.sheetList}  
  },
  modules : {
    sheetModule : sheetModule
  }
}

上はvuexのモジュールの一部です
ここにstateとかcommitとかの型情報を書きたいです

http://slides.com/ktsn/typings-for-safe-vuex#/

その方法がここにあったので、試してみたのですが、

import { DefineModule } from 'vuex'

DesignModuleがないみたいで、importできませんでした

vuexのバージョンに問題があるのかなと思いv3.0.1だったのですが、そこから少しずつ下げていきました

https://github.com/vuejs/vuex/releases

v2.4.0まで試したのですが、DefinModuleはありませんでした
v2.4.0未満のバージョンは使えません

v2.4.0で
New helper method createNamespacedHelpers
とあり、createNamespacedHelpersが初めて追加されているみたいです

http://slides.com/ktsn/typings-for-safe-vuex#/5/3
createNamespacedHelpers
import { createNamespacedHelpers } from 'vuex'
こちらで createNamespacedHelpers を使っているので、v2.4.0未満は使えません

どのようにすればよろしいでしょうか

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

現在の型はこの辺を把握しておけば良いと思います。
DefineModule は Module<S, R> で定義する方向に変わったのかな?

export interface StoreOptions<S> {
  state?: S;
  getters?: GetterTree<S, S>;
  actions?: ActionTree<S, S>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<S>;
  plugins?: Plugin<S>[];
  strict?: boolean;
}

export interface Module<S, R> {
  namespaced?: boolean;
  state?: S | (() => S);
  getters?: GetterTree<S, R>;
  actions?: ActionTree<S, R>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<R>;
}

export interface GetterTree<S, R> {
  [key: string]: Getter<S, R>;
}

export interface ActionTree<S, R> {
  [key: string]: Action<S, R>;
}

export interface MutationTree<S> {
  [key: string]: Mutation<S>;
}

export interface ModuleTree<R> {
  [key: string]: Module<any, R>;
}

書き方は下記のようなイメージ。

import { ActionTree, GetterTree, ModuleTree, MutationTree } from 'vuex';
import { RootState } from '@/store';
import * as sheetModule from './sheet';

export interface MainAreaState {
  sheetList: string[];
}

export const state: MainAreaState = {
  sheetList: sheetList.getSheetAll(),
};

export const mutations: MutationTree<MainAreaState> = {
  'SEARCH_SHEET'(state, searchWord: string) {
    state.sheetList = sheetList.getSheetSearch(searchWord);
  },
};

export const actions: ActionTree<RootState, MainAreaState> = {
  'SEARCH_SHEET'({ commit } , searchWord: string) {
    commit('SEARCH_SHEET', searchWord);
  }
};

export const getters: GetterTree<RootState, MainAreaState> = {
  'GET_SHEET_LIST': state => state.sheetList,
};

export const namespaced: boolean = true;

export const modules: ModuleTree<MainAreaState> = {
  sheet: sheetModule,
};

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/23 23:55

    yhgさん!
    ありがとうございます!
    流石です、やばいです
    なんとなくコードの意味も分かりました
    月曜日会社で試してみます
    本当にありがとうございます

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Vue.js

    645questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • TypeScript

    319questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。