Home>

vue.js : VUE-CLI + VUETIFY QIIITA search app wants to vuex

What I want to do

I thought it seems that a search app using QIITAAPI, which was done with Vue.js tutorials using CDN, was considered to fix various things. Currently, Vue-CLI and VUETIFY are made, and now we want to be able to vuex, but it does not behave now.

VUE-CLI and VUETIFY Source Code

Link of this site
If you enter a specific keyword, the QIITA article URL list is displayed.

GitHub link for this whole code
App.vue ↓

<
TEMPLATE >
 ≪
V-App >
   ≪
V-Card Width= "800px" Class= "MX-Auto MT-5" >
     ≪
V-Card-Title >
       ≪
H1 Class= "DISPLAY-1 ML-10" >
Login <
/H1 >
     ≪
/V-Card-Title >
     ≪
V-Form >
       ≪
v-text-field v-model= "keyword" Label= "Please enter" CLASS= "COL-MD-10 ML-10": COUNTER= "10" />
       ≪
! -Margin, Padding encloses 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 >


Source code for those who want to vuex the above, but the source code 



This does not move GitHub link of all code

App.vue ↓


<
TEMPLATE >
  ≪
V-App >
    ≪
V-Card Width= "800px" Class= "MX-Auto MT-5" >
      ≪
V-Card-Title >
        ≪
H1 Class= "DISPLAY-1 ML-10" >
Login <
/H1 >
      ≪
/V-Card-Title >
      ≪
V-Form >
        ≪
V-Text-Field
          V-model= "$ STORE.STATE.KEYWORD"
          Label= "Please enter"
          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 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: {
  }
})


About Error Statement 


The error sentence has not come out for some reason .... 





Although Guggu is moving your hand for VUEX conversion, it is an honest place .... If it is good, please answer!


Is an error or something out?
champon2021-04-08 00:21:37


I'm sorry for the late reply. It has been added to the text, but some reason is that an error statement has occurred.
Masato fromEnglish2021-04-08 00:21:37
vue.js axios
  • Answer # 1

    The code presented to the question seems to have several issues. (Some errors will be understood if the smallest part is the code where the part is up to work)

    First, why not the code of questions is not rooted. That's whose getAnswer's action is no longer called calling .
    There is a code that monitors keyword on Watch, but this does not fire because such properties are not present in the first place.

    Not recommended Writing will be minimally fired if you change as follows, and other problems will see.

    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 TO STOP WRITING ...";
       this.debouncedgetAnswer ();
     }


    
Handling of forms | VUEXPlease check. In addition, it is good to be all right (anymore) of VUEX (anymore).
    

    It is recommended that you use what has been meaningful in the variable name and the strings on the screen to properly grasp the contents even if it is for practice. (It was confusing when I saw this question.)
    

    Thank you. Try to do so.
    Masato fromEnglish2021-04-08 00:21:37