Как я могу отправить данные из родительского в дочерний компонент с помощью хранилища vuex в компоненте vue?

Мой родительский компонент выглядит следующим образом:

<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) в дочернем компоненте равен нулю.

Например, свойство категории в родительском компоненте = 7. Должен ли результат console.log(this.getCategory) в дочернем компоненте = 7

Почему это не работает? Почему результат нулевой?

Примечание .

Я могу просто отправить данные категории через prop. Но здесь я не хочу использовать prop. Я хочу отправить данные через магазин vuex. Поэтому я хочу устанавливать и получать данные только через магазин vuex.


vue.js vuex vuejs2 vuex-modules vue-component
person Success Man    schedule 26.03.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Хук mounted ребенка выполняется раньше хука mounted родителя. (почему? См. эта ссылка)

console.log(this.getCategory) происходит раньше this.updateCategory(this.category).

Таким образом, вы получаете null в консоли.

Если вы поместите console.log(this.getCategory) в хук updated, вы получите правильное значение в консоли позже.

person Jacob Goh    schedule 26.03.2018
comment
Я пытаюсь изменить mounted на created в родительском компоненте, это работает - person Success Man; 27.03.2018

arrow_upward
2
arrow_downward

Джейкоб Го указал на проблему.

Чтобы решить эту проблему, вы можете использовать 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< /а>

person Vamsi Krishna    schedule 26.03.2018
comment
Я пытаюсь изменить mounted на created в родительском компоненте, это работает - person Success Man; 27.03.2018