#Nuxt2
https://github.com/championswimmer/vuex-module-decorators#accessing-modules-with-nuxtjs
[[Nuxt2]]で[[vuex-module-decorators]]を使う手順。[[vuex-module-decorators]]はインストールされている前提。
## ソースコードの変更
サンプルのStoreとして`~/store/UserStore.ts`を作成する。
```ts
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
export interface User {
id: number
name: string
}
@Module({ name: 'UserStore', namespaced: true, stateFactory: true })
export default class UserStore extends VuexModule {
private _users: User[] = []
get users(): User[] {
return this._users
}
get userNames(): string[] {
return this._users.map((x) => x.name)
}
@Mutation
private _add(user: User): void {
this._users.push(user)
}
@Action({ rawError: true })
add(user: User) {
this._add(user)
}
}
```
`UserStore`などのStoreを初期化するモジュール`~/utils/store-accessor.ts`を作成する。
```ts
/* eslint-disable import/no-mutable-exports */
import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import UserStore from '~/store/UserStore'
let userStore: UserStore
function initialiseStores(store: Store<any>): void {
userStore = getModule(UserStore, store)
}
export { initialiseStores, userStore }
```
Storeの初期化処理で呼び出すため`~/store/index.ts`に処理を書く。
```ts
import { Store } from 'vuex'
import { initialiseStores } from '~/utils/store-accessor'
const initializer = (store: Store<any>) => initialiseStores(store)
export const plugins = [initializer]
export * from '~/utils/store-accessor'
```
## 使い方
`.vue`ファイルの`<script>`内で呼び出せばOK。
```ts
import { computed, defineComponent } from '@vue/composition-api'
import { userStore } from '~/utils/store-accessor'
export default defineComponent({
setup() {
const users = computed(() => userStore.users)
const userCount = computed(() => users.value.length)
const handleClickAddUser = () => {
const newId = userCount.value + 1
userStore.add({ id: newId, name: `User${newId}` })
}
return {
users,
userCount,
handleClickAddUser,
}
},
})
```