Я не уверен, что мой код Vue эффективен

Question

Я новичок в Vue, и мне интересно, смогу ли я узнать от опытных разработчиков здесь о моих кодах Vue. Я просто хочу попросить о помощи, чтобы узнать, эффективен ли мой подход Vue. (Проект работает на Laravel)

---

Дело:

Допустим, у меня есть 2 таблицы в БД

(1) магазинов

(2) ad_accounts

Затем у нас есть 2 веб-страницы для представления данных этих таблиц и выполнения с ними функций CRUD

(1) store.blade.php

(2) adaccount.blade.php

На каждой странице работает компонент Vue

(1) Stores.vue

(2) AdAccounts.vue

Я использую Vuex для управления магазином.

В store.js я бы установил действий для CRUD для каждого компонента vue.

Теперь я понял, что у меня есть ряд действий, которые фактически делают то же самое. Например, у меня есть действие по добавлению магазинов и другое действие по добавлению рекламных аккаунтов. Их единственное отличие в том, что они звонят по другому маршруту Laravel.

Так что мне показалось, что мой код был излишне длинным и немного дорогим. Чтобы решить, я решил написать свои действия в виде шаблона. Вот что я сделал:

1. В store.js я создал действие для каждой функции CRUD для использования в качестве шаблона
2. В Stores.vue и AdAccounts.vue, если мне нужно выполнить функцию CRUD, я бы использовал метод , чтобы вызвать соответствующее действие из store.js и предоставить Маршрут Laravel как часть полезной нагрузки проекта
3. У меня есть состояний и соответствующих получателей для возврата этих состояний в Stores.vue и AdAccounts.vue
4. Каждое действие имеет выделенную мутацию , которая изменяет состояние оценки
5. состояния и геттеры сопоставлены в каждом компоненте Vue , чтобы получить к ним доступ и использовать их

Является ли этот подход эффективным и правильным? У меня есть примеры методов и действий ниже для справки.

---

Stores.vue

<template>
    <div>
        <form @submit.prevent="addData('stores/add')">
      <button type="submit" class="btn btn-primary">Save</button>
        </form>
    </div>
</template>

<script>
export default {
    methods: {
        addData: function(url) {
            this.payload.url = url
            if(
                this.payload.requestData.store_name == "" &&
                this.payload.requestData.store_token == ""
            ) {
                this.payload.isErr = true;
                this.payload.errMsg = "ERROR: Could not continue due to some invalid or missing data. \nPlease check your entries and try again or contact your administrator.";
                this.$store.dispatch('addData', this.payload)
            }
            else {
                this.payload.isErr = false;
                this.$store.dispatch('addData', this.payload)
                this.readDataAll('stores/all', 'store');
            }
            this.cleanOnModalDismiss(this.$refs.addModal, this.refreshRequestData)
        }
    }
}
</script>

AdAccounts.vue

<template>
    <div>
        <form @submit.prevent="addData('ad_accounts/add')">
      <button type="submit" class="btn btn-primary">Save</button>
        </form>
    </div>
</template>

<script>
export default {
    methods: {
        addData: function(url) {
            this.payload.url = url
            if(
                this.payload.requestData.ad_id == "" &&
                this.payload.requestData.ad_name == ""
            ) {
                this.payload.isErr = true;
                this.payload.errMsg = "ERROR: Could not continue due to some invalid or missing data. \nPlease check your entries and try again or contact your administrator.";
                this.$store.dispatch('addData', this.payload)
            }
            else {
                this.payload.isErr = false;
                this.$store.dispatch('addData', this.payload)
                this.readDataAll('ad_accounts/all', 'adaccounts');
            }
            this.cleanOnModalDismiss(this.$refs.addModal, this.refreshRequestData)
        }
    }
}
</script>

store.js

export default new Vuex.Store({
    actions: {
        addData (commit, payload) { // insert a record to DB
            try {
                if(payload.isErr == true) {
                    commit('SHOW_ERRORS', {messageType: "alert-danger", errorMessage: payload.errMsg});
                } else {            
                    axios.post(payload.url, payload.requestData)
                    .then(response=>{
                        if(response.status == 200) {
                            var err_msg = "";
                            if(response.data.success !== null) {
                                response.data.messageType = "alert-info"
                                response.data.actionMessage = response.data.success
                                commit('ADD_DATA', response.data);
                            } else {
                                response.data.messageType = "alert-danger"
                                for(var i=0; i<response.data.error.length; i++) {
                                    err_msg += response.data.error[i] + "\n"
                                }
                                response.data.actionMessage = err_msg
                                commit('ADD_DATA', response.data);
                            }
                        }
                        else {
                            commit('SHOW_ERRORS', {messageType: "alert-danger", errorMessage: "ERROR: Connection status set to '" + response.headers.connection + "' due to error " + response.status + " " + response.statusText + ". \nPlease contact your administrator."});
                        }
                    })
                }
            } catch (error) {
                commit('SHOW_ERRORS', {messageType: "alert-danger", errorMessage: error})
            }
        }
    }
}