Как отладить свойство mapGetter в компоненте Vue.js? - PullRequest
Новая
       13

Как отладить свойство mapGetter в компоненте Vue.js?

0 голосов
/ 11 апреля 2019

Я новичок в Vue.js. Я недавно выучил Vuex и пытаюсь реализовать в своем проекте. Я звоню, вызывая отправку действия из моего dashboard компонента. И вызов ... mapGetter в message компоненте вычисляемого раздела. И я хочу отладить данные, которые я получаю.

Я уже искал свою проблему. Но не смог найти это. То, что я узнал, я не могу использовать console.log () в computed. Я должен использовать отладчик. Но когда я использую отладчик, он говорит, что отладчик - зарезервированное слово.

в моем магазине: 

  state: {
    conversationThreads: [],
    conversation: [],
    users: [],
  },
  getters: {
    conversation: state => {
      return state.conversation;
    }

  },
  mutations: {
    [MUTATION_TYPES.SET_CONVERSATION](state, conversationThread){
      state.conversation= conversationThread;
    }
  },
  actions: {
    getConversationByID: ({ commit }, conversationInfo) => {
      console.log("conversationData: ", conversationInfo)
      axios.get("https://some_API" + conversationInfo.id)
        .then(response => {
          let conversationThread = response.data.messages.data.map(res => ({
            name: res.from.name,
            msg: res.message
          }));
          commit(MUTATION_TYPES.SET_CONVERSATION, conversationThread);
        })
        .catch(error => console.log(error))
    }
  }

в моем компоненте панели управления: 

        methods: {
            selectedDiv: function(conversationInfo, event){
              this.$store.dispatch('getConversationByID', conversationInfo)

            }

        }

в моем компоненте сообщения: 

    computed: {
      ...mapGetters([
        "conversation"
      ]),
      debugger
    },

1 Ответ

1 голос
/ 11 апреля 2019

Вы можете получить аналогичную функциональность, не используя mapGetter, ниже приведен пример. 

computed: {
    yourProperty(){
        const profile = this.$store.getters.profile;
        console.log('profile: ', profile); //Debug
        return profile;
    }
},

Другой вариант - установить часы для вычисляемого свойства. 

computed: {
    ...mapGetters(["profile"]),
},

watch: {
    profile: {
        handler(profile) {
            console.log('profile: ', profile); //Debug
        },
        deep: true
    }
},

Здесь Deep Trueопция используется для наблюдения за обновлениями ключа объекта profile.Если не задано значение true, тогда вызов будет вызываться только тогда, когда получатель profile переназначается с новым объектом.

...