时间戳

首页 > 解决方案 > 如何调试 Vue.js 组件中的 mapGetter 属性？

vue.js - 如何调试 Vue.js 组件中的 mapGetter 属性？

问题描述

我是 Vue.js 的新手。我最近学习了 Vuex 并尝试在我的项目中实现。dashboard我正在从我的组件调用一个动作调度。message并在组件计算部分调用 ...mapGetter 。我想调试我得到的数据。

我已经搜索了我的问题。但是找不到。我了解到我不能在计算中使用 console.log()。我必须使用调试器。但是当我使用调试器时，它说调试器是一个保留字。

在我的商店：

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

标签： vue.jsvuexconsole.logvscode-debugger

解决方案

您可以在不使用的情况下获得类似的功能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对象的关键更新。如果没有提供 deep true ，那么只有当profilegetter 被新对象重新分配时才会调用 watch。

推荐阅读