#vue3 #vue2
[[vuex-class]]の`@Getter`を[[script setup]]で置き換える方法。
## 現状
引数が必要なgetterの例を取り上げる。引数不要の場合はもう少しシンプル。
以下のようなコードがあった場合。
```ts
export default class extends Vue {
@Getter doGetter: (input: string) => string[]
}
```
`store/Getter.ts`の一部。
```ts
const accessGetter = {
doGetter: (state: State) => (input: string): string[] => ...
}
export const createGetters: any => ({
...accessGetter,
})
```
`store/index.ts`の一部。
```ts
export const getters = createGetters();
```
## 置き換え
`store/Getter.ts`では型を明確に定義する。
```ts
accessGetter = {
doGetter: (state: State) => (input: string): string[] => ...
}
export const createGetters = () => ({
...accessGetter,
})
```
`store/index.ts`ではキャスト用の型定義を追加。これで`GetterType`にアクセスすれば、すべてのgetterインターフェースにアクセスできる。
```ts
export const getters = createGetters();
export type GetterType = { [K in keyof typeof getters]: ReturnType<typeof getters[K]> };
```
vueファイルを[[script setup]]で置き換え。
```ts
const root = getCurrentInstance()?.proxy!;
const getter = root.$store.getters as GetterType;
const { doGetter } = getter;
// doGetterは (input: string): string[] 型と推論される
```
## 関連
- [[vuex-classの書き方をscript setupに置き換えるレシピ集]]