mountした初期値設定アクションが、this. OO is not a functionとエラー出力されてしまう

前提・実現したいこと

以下のサイトを参考にVue+Vuexで絞り込み検索できるシステムを作っています。

Vue.js + Vuexでストアの絞り込み検索（フィルター）
https://www.webopixel.net/javascript/1461.html

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

検索クエリを初期設定する機構を実装中にJavaScriptコンソール上で
以下の３つのエラーメッセージが発生しました。

vue
11.
2Error in mounted hook: "TypeError: this.setFilterQuery is not a function"
3found in
4---> <App> at src/App.vue
5
62.
7TypeError: this.setFilterQuery is not a function
8
93.
10Cannot find element: #app

該当のソースコード

App.vue

Vue
1<template>
2
3<v-app id="inspire">
4    <v-app-bar
5      app
6      color="white"
7      flat
8    >
9      <v-container class="py-0 fill-height">
10        <v-toolbar-title><h2>サンプル速報</h2></v-toolbar-title>
11
12        <v-spacer></v-spacer>
13        
14        <v-btn
15          v-for="link in links"
16          :key="link"
17          text
18        >
19          {{ link }}
20        </v-btn>
21
22        <v-spacer></v-spacer>
23
24        <v-responsive max-width="260">
25          <v-text-field
26            dense
27            flat
28            hide-details
29            rounded
30            solo-inverted
31            placeholder="タイトル"
32            clearable
33            v-model="filterQuery.title"
34            @change="handleChangeQuery"
35          ></v-text-field>
36        </v-responsive>
37      </v-container>
38    </v-app-bar>
39
40    <v-main class="grey lighten-3">
41      <v-container>
42        <v-row>
43    <v-col>
44...
45    </v-col>
46
47      <v-col>
48        <v-sheet>        >
49
50        <h2>
51            条件にあう決済方法
52        </h2>
53        
54        <v-divider></v-divider>
55
56      <div class="pl-4">        
57         <v-list two-line>
58
59          <template v-for="(item, index) in items.slice(0, 9)">
60            <v-divider
61              v-if="item.divider"
62              :key="index"
63              :inset="item.inset"
64            ></v-divider>
65            <v-list-item
66              v-else
67              :key="item.title"
68            >
69              <v-list-item-content>
70                <v-row no-gutters>
71                  <v-col
72                    sm="2"
73                  >
74                    <v-btn
75                      color="red"
76                      small
77                      dark
78                    >
79                      <v-list-item-title v-html="item.method"></v-list-item-title>
80                    </v-btn>
81
82                    <v-btn
83                      color="yellow"
84                      small
85                    >
86                      チャージで還元
87                    </v-btn>
88                  </v-col>
89                    
90                  <v-col
91                    sm="3"
92                    style="display: flex; justify-content: center; align-items: center; "
93                  >
94                  <v-list-item-title v-html="item.title" class="pl-8" style="font-weight:bold; line-height=1.2; font-size:1.75rem; vertical-align:basement;"></v-list-item-title>
95                  </v-col>
96
97                  <v-col
98                    sm="3"
99                  >
100                    <p class="text-center" style='font-size:0.6; font-color:grey;'>利用可能店舗数</p>
101                    <div class="text-center">
102                    <v-rating
103                      readonly
104                      v-model="item.rating"
105                      background-color="grey lighten-2"
106                      color="primary"
107                      small
108                    ></v-rating>
109                    </div>
110                  </v-col>
111                  
112                  <v-col
113                    sm="2"
114                  >
115                    <p style='font-size:0.6; font-color:grey; text-align:center;'>上乗せポイント</p>
116                    <v-list-item-title v-html="item.point" class="text-center" style="font-weight:bold; font-size:1.5rem;"></v-list-item-title>
117                  </v-col>
118                  
119                  <v-col
120                    sm="2"
121                    style="display: flex; justify-content: center; align-items: center; "
122                  >
123                    
124                    <v-btn
125                      color="blue"
126                      dark
127                      style="text-transform: none"
128                    >
129                      公式サイトへ
130                    </v-btn>
131                  </v-col>
132                </v-row>                
133                <v-row>
134                  <v-col
135                    sm="12"
136                    class="blue-grey lighten-5 px-8 py-3"
137                    style="text-align:left;"
138                  >
139                  <p style="">補足説明</p>
140                  </v-col>
141                </v-row>
142                <!--store.getters.filteredTasks()-->
143
144              </v-list-item-content>
145            </v-list-item>
146          </template>
147        </v-list>
148      </div>  
149
150            </v-sheet>
151          </v-col>
152        </v-row>
153      </v-container>
154    </v-main>
155  </v-app>
156</template>
157
158<script>
159  
160  import { mapGetters } from "vuex"
161
162  export default {
163  data(){
164    return {
165    serchedMethod: [],
166    serchedPoint:0,
167......
168
169    filterQuery:{
170      title:""
171      }, // 検索パラメータ
172    }
173  },
174  computed: {
175    //main.jsでローカルにstoreを登録してるので、$storeが使える
176    //ここではgettersに登録したmessageゲッターを使ってstoreのstateのitems,linkを取得している
177   ...mapGetters([
178      'items',
179      'links',
180      ['filteredItems'],
181      'searchedRating',
182      // ...
183    ]),
184  },
185  
186  mounted() {
187    this.setFilterQuery(this.filterQuery);
188  },
189  
190  methods: {
191    handleChangeQuery() {
192        this.setFilterQuery(this.filterQuery);
193    },
194  },
195}
196
197</script>
198

store.js

javascript
1
2import Vue from 'vue'
3import Vuex from 'vuex'
4
5Vue.use(Vuex);
6
7const store = new Vuex.Store({
8  state: {
9      links:[
10       'シミュレータ',
11       'ニュース',
12       'マイナポイントとは',
13       'このサイトについて'
14      ],
15      items:[
16        {
17            method: "QR",
18            point:5000,
19            title:"LinePay",
20            rating:3
21        },  
22        {
23            method: "QR",
24            point:0,
25            title:"PayPay",
26            rating:4
27        },
28        {
29            method: "QR",
30            point:1000,
31            title:"d払い",
32            rating:4
33        }  
34      ],
35      filterQuery: {}, // 検索パラメータ
36  },
37  
38  getters:{
39    links(state) {
40      return state.links
41    },
42    items(state) {
43      return state.items
44    },
45    filteredItems (state) {
46        let data = state.items;
47        // タイトルの検索
48        if (state.filterQuery.title !== "") {
49            data = data.filter(function (row) {
50                return row['title'].indexOf(state.filterQuery.title) !== -1;
51            });
52        }
53        return data;
54    },
55    limit(state){ 
56      return state.limit=5
57    },
58    searchedRating(state){
59      return state.rating=5
60    }
61  },
62  mutations: {
63    toggleSideMenu (state) {
64      state.drawer = !state.drawer
65    },
66    setFilterQuery(state, filterQuery) {
67        state.filterQuery = {...filterQuery};
68    }
69  },
70  actions: {
71    toggleSideMenu ({ commit }) {
72      commit('toggleSideMenu')
73    }
74  }
75})
76
77export default store
78

main.js

javascript
1
2import Vue from 'vue'
3import App from './App.vue'
4import router from './router'
5import store from './store'
6import vuetify from './plugins/vuetify';
7import firebase from 'firebase'
8
9Vue.config.productionTip = false
10
11const config = {
12....
13
14  };
15// Initialize Firebas
16firebase.initializeApp(config);
17
18new Vue({
19  el: '#app',
20  router,
21  store,
22  vuetify,
23  render: h => h(App)
24}).$mount('#app')

試したこと

mountの位置を入れ替えたりしましたが解消しませんでした。
どなたかご教示いただけると幸いです。よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

vue/cli 4.5.8
vuetify 2.3.0
Cloud9

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

回答1件

ベストアンサー

コンポーネント内から setFilterQuery というvuex storeのアクションに定義されたメソッドを呼び出す場合、 this.$store を介してアクセスするか、 mapActions を使ってコンポーネントメソッドにマッピングする必要があります。

  methods: {
    handleChangeQuery() {
        this.setFilterQuery(this.filterQuery);
    },
    ...mapActions([
      'setFilterQuery', 
    ]),
  },

参考: https://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components

投稿2020/12/08 01:20

DaikiOjima

総合スコア271

mannnakakunn

2020/12/08 21:44

ご教示ありがとうございます。 methods: { handleChangeQuery() { this.setFilterQuery(this.filterQuery); }, ...mapMutations([ 'setFilterQuery', ]), }, のようにしたら機能しました。ただご教示いただいたように、Action経由でMutationを呼び出した方が行儀がいい気がしています・・・。

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