【NuxtJS】Vuex で mapGetters 引数ありの書き方

やりたいこと

Nuxt.js を利用時に、Vuex で mapGetters に引数を持たせる場合には、どのようにすればよいのか分からなかったので調べてメモしました。

やりたいこと
環境
環境構築
ディレクトリ
コード
- store/hoge-module.js
- pages/index.vue
実行
解説
おまけメソッドとして利用したい場合
参考

環境

Nuxt Vuex: モジュールモード

Vuex には、クラシックモードとモジュールモードの2つのStore管理方法がありますが、この記事では、モジュールモードを取り扱います。

※ NuxtJS のバージョン 2.12.X の以降だと、クラシックモードは廃止予定になっているようです。

環境構築

Nuxt.js の環境構築です。create-nuxt-appを利用します。

npm i -g create-nuxt-app

バージョンは、create-nuxt-app/3.1.0 darwin-x64 node-v12.13.0です。

create-nuxt-app をしたときの設定は以下のとおりです。

~/development $ npx create-nuxt-app example-nuxt

create-nuxt-app v3.1.0
✨  Generating Nuxt.js project in example-nuxt
? Project name: example-nuxt
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

ディレクトリ

今回、利用するファイル一覧です。tree コマンドで表示しています。node_modules, .nuxt, .gitフォルダは表示すると膨大になるので隠しています。

example-nuxt $ tree -a -L 2 -I 'node_modules|.nuxt|.git' .
├── .editorconfig
├── .gitignore
├── README.md
├── layouts
│   └── default.vue
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
│   └── index.vue
└── store
    └── hoge-module.js

コード

storeフォルダに、hoge-module.jsを作成し、pagesフォルダのindex.vueを修正します。default.vueは特に変更しません。

store/hoge-module.js

hoge-module.jsには、以下を記入します。

export const state = () => ({
  todos: [
    { id: 1, text: 'hoge' },
    { id: 2, text: 'fuga' }
  ]
})

export const getters = {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

pages/index.vue

index.vueには、以下のように修正します。

<template>
  <p>{{ todo(1) }}</p>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      todo: 'hoge-module/getTodoById'
    })
  }
}
</script>

実行

storeと表示するビューができたので、あとは実行するだけです。実行には、以下のコマンドを実行します。

npm run dev

実行すると、下記のように文字が表示されます。文章を読むと、http://localhost:3000/にアクセスすれば良いことがわかるので、ブラウザでそのurlを開きます。

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt.js @ v2.13.3                   │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ブラウザでhttp://localhost:3000/を開いたときのページ内容が下図になります。

解説

pages/index.vue の template言語ブロックのtodo(1) の引数(1)が、store/hoge-module.js の (state) => (id) => { の id に相当します。

今回の場合とだと、1 という値が、idから取得できるようになります。hoge-module.jsで設定したstateのtodosのid1の値である{ id: 1, text: 'hoge' }が表示されたことがわかります。

つまりは、mapGetters で指定したプロパティ名を関数として利用することで引数を渡せるということのようですね。

おまけメソッドとして利用したい場合

script言語ブロック内で、this.todo(1)のような書き方をすることで、todosのid1の要素を取得することができます。

index.vueを修正します。mounted()内で、console.log(this.todo(1))と記入します。これで、ページを開いた時に、hoge-module.jsのgettersのgetTodoByIdが呼ばれるようになります。

<template>
  <p>{{ todo(1) }}</p>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      todo: 'hoge-module/getTodoById'
    })
  },
  mounted() {
    console.log(this.todo(1))
  }
}
</script>