Question

我的父组件是这样的：

<template>
    ...
        <search-result/>
    ...
</template>
<script>
    import {mapActions} from 'vuex'
    ...
    export default {
        ...
        props: ['category'],
        mounted() {
            this.updateCategory(this.category)
        },
        methods: {
            ...mapActions(['updateCategory']),
        }
    }
</script>

我的孩子组件是这样的：

<template>
    ...
</template>
<script>
    import {mapGetters} from 'vuex'
    ...
    export default {
        ...
        mounted() {
            console.log(this.getCategory)
        },
        computed: {
            ...mapGetters(['getCategory'])
        },
    }
</script>

我的模块vuex在组件之间发送数据，如下所示：

import { set } from 'vue'
...
// initial state
const state = {
    category: null
}
// getters
const getters = {
    getCategory: state =>  state.category
}
// actions
const actions = {
    updateCategory ({commit}, payload) {
        commit(types.UPDATE_CATEGORY, payload)
    }
}
// mutations
const mutations = {
    [types.UPDATE_CATEGORY] (state, payload) { 
        state.category = payload
    }
}
export default {
    state,
    getters,
    actions,
    mutations
}

我尝试这样，但它不起作用

如果代码已执行，则子组件中console.log（this.getCategory）的结果为null

例如，父组件中的类别道具= 7.如果子组件中的console.log（this.getCategory）的结果= 7

为什么它不起作用？为什么结果为空？

注意：

我可以通过prop发送类别数据。但在这里我不想使用道具。我想通过vuex商店发送数据。所以我想只通过vuex商店设置和获取数据

Answer 1

在父{q} mounted挂钩之前执行子mounted挂钩。（为什么？见https://forum.vuejs.org/t/order-of-lifecycle-hooks-for-parent-and-child/6681/2?u=jacobgoh101）

console.log(this.getCategory)发生在this.updateCategory(this.category)之前。

因此，您在控制台中获得null。

如果您将console.log(this.getCategory)放在updated挂钩中，稍后您将在控制台中获得正确的值。

Answer 2

Jacob goh 指出了这个问题。

要解决此问题，您可以在子组件的let res: any; parseString(response.body, function (err, result) { res = JSON.stringify(result) console.dir(result); return res; });挂钩中使用vm.$nextTick()，以确保已呈现整个视图并调用父级的mounted挂钩。

mounted

以下是working fiddle

您可以在此处详细了解为何使用<template> ... </template> <script> import {mapGetters} from 'vuex' ... export default { ... mounted() { this.$nextTick(() => { console.log(this.getCategory); }) }, computed: { ...mapGetters(['getCategory']) }, } </script>：Vue updates the DOM asynchronously

如何通过vue组件中的vuex store将数据从父组件发送到子组件？

2 个答案: