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