реагировать на изменения данных в компоненте с помощью vuex

Question

Я пытаюсь создать какой-то планировщик для себя.Я использую Vue, vuex, axios и laravel в бэкэнде.

Теперь у меня есть компонент «Дата» (представление), и в нем есть компонент «шоу» и «создание».

Теперь я хочу, чтобы, если я создаю новую дату в компоненте создания, список в компоненте шоу будет соответственно обновляться.Почему-то я пока не могу понять это правильно.Я сам все еще новичок в vuejs и особенно в vuex.

Я видел такие вещи, как функция «смотреть», но я не уверен, как использовать ее в этом случае.Я также не уверен, что Vuex может / должен мне помочь вообще.Предполагается, что Vuex предоставит данные, которые я хочу использовать практически везде.Но это всего лишь вещь между компонентом создания / показа.

Теперь вы можете рассмотреть возможность получения всех встреч в vuex (store.js) через API, но действительно ли это то, что должно быть получено в vuex?

Вот мой компонент создания:

<script>
    import {mapMutations} from 'vuex'
    import axios from 'axios'

    export default {
    name: "create",
    data: function () {
        return {
            title: '',
            desc: '',
            date: '',
        }
    },
    methods: {
        ...mapActions([
            'addDate'
        ]),
        addDate: function () {
            let newDate = {
                title: this.title,
                description: this.desc,
                date: this.date
            };
            axios.post('/date/save', {
                newDate: newDate
            }).then(function (response) {
                // maybe here goes the update logic for show component?
            }).catch(function (error) {
                console.log(error);
            });
            this.addDate(newDate);
            this.title = '';
            this.desc = '';
            this.date = '';
        }
    }
}
</script>

Показать компонент:

<script>
    import Date from "./date";
    import axios from 'axios'

    export default {
        name: "show",
        components: {Date},
        data: function () {
            return {
                dates: [],
            }
        },
        computed: {},
        created() {
            let self = this;
            axios.get('/date/dates')
                .then(function (response) {
                    self.dates = response.data.data;
                }).catch(function (error) {
                console.log(error);
            })
        }
    }
</script>

Данные просто отображаются с v-for

Vuex (store.js)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {

    },
    getters: {

    },
    mutations: {
        ADD_DATE: (state, date) => {
            state.dates.push(date);
        }
    },
    actions: {
        addDate: (context, date) => {
            context.commit("ADD_DATE", date)
        }
    }
})