如何在Vue.js组件中调试mapGetter属性?

问题描述 投票:0回答:1

我是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.js vuex console.log vscode-debugger
1个回答
1
投票

您可以在不使用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
    }
},

这里深度真实选项用于观察profile对象的关键更新。如果没有提供deep true,那么只有当profile getter被重新分配给新对象时才会调用watch。

© www.soinside.com 2019 - 2024. All rights reserved.