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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

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

TypeScript

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

Q&A

解決済

1回答

4393閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

TypeScript

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

0グッド

0クリップ

投稿2018/06/22 03:37

編集2018/06/22 03:39

typescript

1 2import SheetList from '../../../../data/sheet/sheetList' 3var sheetList = new SheetList() 4 5export const mainAreaModule = { 6 namespaced: true, 7 state: { 8 sheetList: sheetList.getSheetAll() 9 }, 10 mutations: { 11 'SEARCH_SHEET'(state, searchWord : string) { 12 state.sheetList = sheetList.getSheetSearch(searchWord) 13 }, 14 }, 15 actions: { 16 'SEARCH_SHEET'( { commit } , searchWord : string) { 17 commit('SEARCH_SHEET', searchWord) 18 } 19 }, 20 getters:{ 21 'GET_SHEET_LIST': state => {return state.sheetList} 22 }, 23 modules : { 24 sheetModule : sheetModule 25 } 26}

上は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未満は使えません

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

typescript

1export interface StoreOptions<S> { 2 state?: S; 3 getters?: GetterTree<S, S>; 4 actions?: ActionTree<S, S>; 5 mutations?: MutationTree<S>; 6 modules?: ModuleTree<S>; 7 plugins?: Plugin<S>[]; 8 strict?: boolean; 9} 10 11export interface Module<S, R> { 12 namespaced?: boolean; 13 state?: S | (() => S); 14 getters?: GetterTree<S, R>; 15 actions?: ActionTree<S, R>; 16 mutations?: MutationTree<S>; 17 modules?: ModuleTree<R>; 18} 19 20export interface GetterTree<S, R> { 21 [key: string]: Getter<S, R>; 22} 23 24export interface ActionTree<S, R> { 25 [key: string]: Action<S, R>; 26} 27 28export interface MutationTree<S> { 29 [key: string]: Mutation<S>; 30} 31 32export interface ModuleTree<R> { 33 [key: string]: Module<any, R>; 34}

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

typescript

1import { ActionTree, GetterTree, ModuleTree, MutationTree } from 'vuex'; 2import { RootState } from '@/store'; 3import * as sheetModule from './sheet'; 4 5export interface MainAreaState { 6 sheetList: string[]; 7} 8 9export const state: MainAreaState = { 10 sheetList: sheetList.getSheetAll(), 11}; 12 13export const mutations: MutationTree<MainAreaState> = { 14 'SEARCH_SHEET'(state, searchWord: string) { 15 state.sheetList = sheetList.getSheetSearch(searchWord); 16 }, 17}; 18 19export const actions: ActionTree<RootState, MainAreaState> = { 20 'SEARCH_SHEET'({ commit } , searchWord: string) { 21 commit('SEARCH_SHEET', searchWord); 22 } 23}; 24 25export const getters: GetterTree<RootState, MainAreaState> = { 26 'GET_SHEET_LIST': state => state.sheetList, 27}; 28 29export const namespaced: boolean = true; 30 31export const modules: ModuleTree<MainAreaState> = { 32 sheet: sheetModule, 33};

投稿2018/06/23 11:39

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/06/23 14:55

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問