60195


# やりたいこと

cdnを用いたvue.jsのチュートリアルでやったQiitaAPIを使った検索アプリを色々なものに直したみたいとある日思いました。現状vue-
cliとvuetify化は出来て、今はvuex化してみたいと考えていますが、現状挙動しない状態です。

# vue-cliとvuetify化したソースコード

[このサイトのリンク](https://keen-lamarr-1fd89b.netlify.com/)  
特定のキーワードを入力すると、Qiitaの記事URL一覧が出ます。  
[![画像の説明をここに入力](https://i.stack.imgur.com/U63OD.png)](https://i.stack.imgur.com/U63OD.png)

[この全コードのgithubのリンク](https://github.com/masal9pse/vueQiitApi/tree/development)  
App.vue ↓

[code]

    <template>
     <v-app>
       <v-card width="800px" class="mx-auto mt-5">
         <v-card-title>
           <h1 class="display-1 ml-10">ログイン</h1>
         </v-card-title>
         <v-form>
           <v-text-field v-model="keyword" label="入力してください" class="col-md-10 ml-10" :counter="10" />
           <!-- margin,paddingはclassで囲む -->
           <p>{{ message }}</p>
           <ul>
             <li v-for="item in items" :key="item.id">
               <a v-bind:href="item.url" target="_blank">{{item.title}}</a>
               likes:{{item.likes_count}}
             </li>
           </ul>
         </v-form>
       </v-card>
     </v-app>
    </template>
    
    <script>
    import _ from "lodash";
    import axios from "axios";
    
    export default {
     name: "App",
     data() {
       return {
         items: null,
         keyword: "",
         message: ""
       };
     },
     watch: {
       keyword: function() {
         this.message = "waiting in you to stop writing...";
         this.debouncedGetAnswer();
       }
     },
     created: function() {
       this.debouncedGetAnswer = _.debounce(this.getAnswer, 1000);
     },
     methods: {
       getAnswer() {
         if (this.keyword === "") {
           this.items = null;
           this.message = "";
           return;
         }
         this.message = "Loading...";
         let vm = this;
         let params = { page: 1, per_page: 20, query: this.keyword };
         axios
           .get("https://qiita.com/api/v2/items", { params })
           .then(response => {
             console.log(response);
             vm.items = response.data;
           })
           .catch(error => {
             vm.message = "Error" + error;
           })
           .finally(() => {
             vm.message = "";
           });
       }
     }
    };
    </script>
    
    
[/code]

# 上記をvuex化したいが動かない方のソースコード

[この動かない全コードのgithubのリンク](https://github.com/masal9pse/vueQiitApi/tree/master)  
App.vue ↓

[code]

    <template>
      <v-app>
        <v-card width="800px" class="mx-auto mt-5">
          <v-card-title>
            <h1 class="display-1 ml-10">ログイン</h1>
          </v-card-title>
          <v-form>
            <v-text-field
              v-model="$store.state.keyword"
              label="入力してください"
              class="col-md-10 ml-10"
              :counter="10"
            />
            <p>{{ $store.state.message }}</p>
            <ul>
              <li v-for="item in ($store.state.items)" :key="item.id">
                <a v-bind:href="item.url" target="_blank">{{item.title}}</a>
                likes:{{item.likes_count}}
              </li>
            </ul>
          </v-form>
        </v-card>
      </v-app>
    </template>
    
    <script>
    import _ from "lodash";
    import { mapActions } from "vuex";
    export default {
      name: "App",
      data() {
        return {
          //
        };
      },
      watch: {
        keyword() {
          this.$store.state.message = "waiting in you to stop writing...";
          this.debouncedGetAnswer();
        }
      },
      created() {
        this.debouncedGetAnswer = _.debounce(this.getAnswer, 1000);
      },
      methods: {
        ...mapActions(["getAnswer"])
      }
    };
    </script>
    
    
[/code]

store/index.js

[code]

    import Vue from 'vue'
    import Vuex from 'vuex'
    import axios from 'axios'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        keyword: "",
        items: null,
        message: ""
      },
      mutations: {
        updateItems(state, items) {
          state.items = items
        }
      },
      actions: {
        getAnswer({ commit }, authData) {
          if (this.keyword === "") {
            this.items = null;
            this.message = "";
            return;
          }
          authData.message = "Loading...";
          let params = { page: 1, per_page: 20, query: authData.keyword };
          axios
            .get("https://qiita.com/api/v2/items", { params })
            .then(response => {
              console.log(response);
              commit('updateItems', response.data.items);
            })
        }
      },
      modules: {
      }
    })
    
    
[/code]

# エラー文について

エラー文はなぜか出ていません・・・・。  
[![画像の説明をここに入力](https://i.stack.imgur.com/7smdZ.png)](https://i.stack.imgur.com/7smdZ.png)  
[![画像の説明をここに入力](https://i.stack.imgur.com/q9IKg.png)](https://i.stack.imgur.com/q9IKg.png)  
vuex化に関してはググって手を動かしてはいるものの、正直詰んでる状態です・・・。良ければ回答お願いします！


CC BY-SA 4.0
2019-10-31T15:20:49.303
60167
2021-04-04T00:55:14.103
2021-04-04T00:55:14.103
32986
36424
question
vue.js axios
vue-cli + vuetifyのQiita検索アプリをvuex化したい


質問に提示のコードにはいくつもの問題点があるようです。(最低限つまづいている部分が動くコードになればいくつかはエラーでわかるでしょう)

ひとまず、根本的に質問のコードが何故動いていないのか。それはそもそもgetAnswerのアクションがどこからも **呼び出されなくなっている** からです。  
watchでkeywordを監視するコードがありますが、そもそもそんなプロパティは存在しなくなっているためこれが発火することはありません。

**推奨する書き方ではありません** が、次のように変更すれば最低限発火するようになり、他の問題点がみえてくるでしょう。

[code]

    diff --git a/src/App.vue b/src/App.vue
    index 69884ab..5dec320 100644
    --- a/src/App.vue
    +++ b/src/App.vue
    @@ -34,7 +34,7 @@ export default {
         };
       },
       watch: {
    -    keyword() {
    +    ['$store.state.keyword']() {
           this.$store.state.message = "waiting in you to stop writing...";
           this.debouncedGetAnswer();
         }
    
[/code]

[フォームの扱い |
Vuex](https://vuex.vuejs.org/ja/guide/forms.html)なども確認ください。また、Vuexの公式ドキュメントを(もう)一度すべてよみなおすといいかと。

それはそうと、練習用などであろうとも中身をきちんと把握するためにも変数名や画面上の文字列にはきちんと意味のあったものを使用することをおすすめします。(この質問をみたときも混乱ものでした。)


CC BY-SA 4.0
2019-11-02T00:22:27.363
60195
2019-11-02T00:22:27.363
2376
60167
answer