【Vue】selectの選択肢をstoreのstateから参照したい

前提・実現したいこと

selectフォームの選択肢を複数のコンポーネントで共有したいため、コンポーネントのdata内に直接持たせるのではなく、storeのstateに保存し、そこからgettersで引っ張りコンポーネントのdata内に保存したいです。
エラーで止まってしまっているので、追加するコードがあればご教示いただけますでしょうか。

発生している問題・エラーメッセージ

[vuex] module namespace not found in mapGetters(): genreIds/

該当のソースコード

store/index.js

javascript
1import Vue from 'vue'
2import Vuex from 'vuex'
3
4Vue.use(Vuex)
5
6const state = {
7  genreIds: [
8    { genreId: 100433, name: 'ルームウェア' },
9    { genreId: 562637, name: '家電' },
10    { genreId: 510915, name: '洋酒' },
11    { genreId: 100804, name: 'インテリア' },
12    { genreId: 215783, name: '日用品雑貨' },
13    { genreId: 558944, name: 'キッチン用品・食器' },
14    { genreId: 100005, name: '花' },
15    { genreId: 566732, name: 'カタログ' },
16    { genreId: 553283, name: 'ギフト券・商品券' },
17  ],
18}
19
20const getters = {
21  genreIds: state => state.genreIds,
22}
23
24export default new Vuex.Store({
25  namespaced: true,
26  state,
27  getters
28})

_form.vue

javascript
1<template>
2  <select class="select_box" v-model="genreId_selected" @change="CHANGE_GENRE_ID($event.target.value)">
3    <option disabled value="" >ジャンルで選ぶ</option>
4    <option v-for="genreId in genreIds" :value="genreId.genreId" :key="genreId.id">
5      {{ genreId.name }}
6    </option>
7  </select>
8</template>
9
10<script>
11import { mapGetters } from 'vuex'
12export default {
13  name: 'ApiCall',
14  data() {
15    return {
16      genreId_selected: '',
17    }
18  },
19  computed: {
20    ...mapGetters("genreIds", ["genreIds"])
21  },
22</script>

行動規範の内容に同意します

回答1件

ベストアンサー

mapGettersの第一引数は名前空間です。

https://vuex.vuejs.org/ja/api/#mapgetters

名前空間はモジュールが持つものなので、Vuex.Storeの中にmodulesが必要です。

https://vuex.vuejs.org/ja/guide/modules.html#%E5%90%8D%E5%89%8D%E7%A9%BA%E9%96%93

名前空間がgenreIdsだと被って分かりにくいので、genresという名前で指定したサンプルコードを以下に書いておきます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
7    <script src="https://unpkg.com/vuex"></script>
8    <script>
9        Vue.use(Vuex)
10
11        const state = {
12            genreIds: [
13                { genreId: 100433, name: 'ルームウェア' },
14                { genreId: 562637, name: '家電' },
15                { genreId: 510915, name: '洋酒' },
16                { genreId: 100804, name: 'インテリア' },
17                { genreId: 215783, name: '日用品雑貨' },
18                { genreId: 558944, name: 'キッチン用品・食器' },
19                { genreId: 100005, name: '花' },
20                { genreId: 566732, name: 'カタログ' },
21                { genreId: 553283, name: 'ギフト券・商品券' },
22            ],
23        }
24
25        const getters = {
26            genreIds: state => state.genreIds,
27        }
28
29        const store = new Vuex.Store({
30            modules: {
31                genres: {
32                    namespaced: true,
33                    getters,
34                    state,
35                }
36            },
37        })
38
39        const comp = {
40            template: `
41                <select class="select_box" v-model="genreId_selected" @change="CHANGE_GENRE_ID($event.target.value)">
42                    <option disabled value="" >ジャンルで選ぶ</option>
43                    <option v-for="genreId in genreIds" :value="genreId.genreId" :key="genreId.id">
44                    {{ genreId.name }}
45                    </option>
46                </select>
47            `,
48            name: 'ApiCall',
49            data() {
50                return {
51                    genreId_selected: '',
52                }
53            },
54            computed: {
55                ...Vuex.mapGetters("genres", ["genreIds"])
56            },
57        }
58
59        window.addEventListener('DOMContentLoaded', function () {
60            new Vue({
61                el: '#app',
62                components: {
63                    "api-call": comp,
64                },
65                store,
66            });
67        });
68    </script>
69</head>
70
71<body>
72    <div id="app">
73        <api-call></api-call>
74    </div>
75</body>
76
77</html>