monteecristoo’s blog

https://twitter.com/irakaarozo

Vue.jsのcomputedにgettersを使用した時のconsole上のエラー

  • ある関数の引数にcomputedしたloadedUserを使用

<img :src="getUserPic(loadedUser.avatar)">

 

  • computedにgettersであるloadedUserを使用

computed() {
  loadedUser() {
    return this.$store.getters.loadedUser(this.$route.params.userName);

  }

}

 

  • gettersでのloadedUser // loadedUsers に読み込んだ users の中からURLにマッチした user を返すを定義

const getters = { 

  loadedUser(state) {
    return (id_st) => {
      return state.loadedUsers.find((loadedUser) => {
        return loadedUser.id_st === id_st;
      });
    };
  },

}

 

f:id:monteecristoo:20170912215149j:plain

#9

Vue.jsのライフサイクルでまずgettersより先にgetUserPic(loadedUser.avatar)が解釈される(???)ので、

app.js:sourcemap:12834 TypeError: Cannot read property 'avatar' of undefined

と表示されるが後にgettersでloadedUser.avatarの値が決まる(???)ので表示は正常に動作する。

consoleのバグ取りは出来ない???

 ____________________________________________________________________

vue.js@2.4.3で上記が動作しなくなった???(要検証)

computedのfunctionの引数の this.$route.params.userName が passing 出来なくなった???

 

@getUserPicMixin.js

computed: {
  loadedUser() {
    return this.state.profile.loadedUser;

  }

}

 

@profile.js

const state = {
  loadedUser = ""

}

  

const actions = {
/* Add user to loadedUsers from profile.vue */
  loadUser({ commit }, user) {
    commit('LOAD_USER', user);
  }
};

 

const mutations = {
  'LOAD_USER' (state, user) {
    state.loadedUser = user;
  }
};

 

@profile.vue

created() {
  axios.get("/user/info/" + this.$route.params.id).then(response => {
    const user = response.data;
    this.loadUser(user);
  });

}

---------------------------------------------------------------------

this.$route.params.id の passing を created() 経由で処理することで解決

app.js:sourcemap:12834 TypeError: Cannot read property 'avatar' of undefined

はエラー表示しなくなった。