tomatoaiu の Tech Blog

プログラミングやツールについてのまとめブログ

MENU

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

やりたいこと

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

環境

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.jsgettersgetTodoByIdが呼ばれるようになります。

<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>

修正したら、ブラウザでhttp://localhost:3000/を開き、開発者ツールを開いてコンソールを見ると、下記のように表示されていることがわかります。

ブラウザのコンソールのイメージ
ブラウザのコンソールのイメージ

参考

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

  • 作者:MIO
  • 発売日: 2018/05/29
  • メディア: Kindle版