-1

我的父组件是这样的：

<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

例如父组件中的category prop = 7。子组件中console.log(this.getCategory)的结果是否应该= 7

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

注意：

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

4

2 回答 2

3

子mounted钩子在父mounted钩子之前执行。（为什么？看这个链接）

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

因此，您进入null控制台。

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

于 2018-03-26T09:17:30.137 回答
2

Jacob goh指出了问题所在。

为了解决这个问题，你可以vm.$nextTick()在子组件的mounted钩子中使用，以确保整个视图已经被渲染并且父组件的mounted钩子被调用。

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

这是工作小提琴

你可以在这里了解更多关于为什么使用vm.nextTick()：Vue 异步更新 DOM

于 2018-03-26T10:06:28.373 回答