Question

我正在尝试为自己创建某种计划器。我在后端使用Vue，vuex，axios和laravel。

我现在有一个“日期”（视图）组件，其中有一个“显示”和“创建”组件。

现在，我希望如果我在create组件中创建一个新日期，那么show组件中的列表将进行相应的更新。不知何故我还不太正确。我本人在vuejs尤其是vuex方面还很陌生。

我看过类似“监视”功能的东西，但是我不确定在这种情况下如何使用它。我也不确定vuex是否可以/应该完全帮助我。 Vuex应该提供我想在几乎所有地方使用的数据。但这只是创建/显示组件之间的事情。

现在您可以考虑通过API在vuex（store.js）中获取所有约会，但是在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)
        }
    }
})

使用vuex对组件上的数据更改做出反应

0 个答案: