0

やりたいこと

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

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

このサイトのリンク
特定のキーワードを入力すると、Qiitaの記事URL一覧が出ます。
画像の説明をここに入力

この全コードのgithubのリンク
App.vue ↓

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

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

この動かない全コードのgithubのリンク
App.vue ↓

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

store/index.js

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: {
  }
})

エラー文について

エラー文はなぜか出ていません・・・・。
画像の説明をここに入力
画像の説明をここに入力
vuex化に関してはググって手を動かしてはいるものの、正直詰んでる状態です・・・。良ければ回答お願いします!

2
  • エラーとかは出てますでしょうか?
    – blank
    Commented 2019年11月1日 2:46
  • 返信遅くなってすいません。本文にも追加しましたがなぜかエラー文は発生してない状況です。 Commented 2019年11月1日 15:10

1 件の回答 1

1

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

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

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

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();
     }

フォームの扱い | Vuexなども確認ください。また、Vuexの公式ドキュメントを(もう)一度すべてよみなおすといいかと。

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

1
  • ありがとうございます。そうしてみます。 Commented 2019年11月2日 4:01

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。