我不确定我的Vue代码是否有效

Question

我是Vue的初学者，我想知道我是否可以从经验丰富的开发人员那里获得有关我的Vue代码的见解。我只想寻求帮助，以了解我的Vue方法是否有效且正确。 （项目正在Laravel上运行）

---

案件：

让我们说我在数据库中有2个表

  

（1）个商店

     

（2）个广告帐户

然后，我们有2个网页来呈现这些表的数据并执行CRUD功能

  

（1）store.blade.php

     

（2）adaccount.blade.php

每个页面都在运行Vue组件

  

（1）Stores.vue

     

（2）AdAccounts.vue

我正在使用 Vuex 进行商店管理。

在 store.js 中，我将为每个vue组件的CRUD设置一组动作。

现在，我意识到我有一系列实际上可以完成相同操作的动作。例如，我有一个添加商店的操作，另一个有添加广告帐户的操作。他们唯一的区别是，他们呼叫了一条不同的Laravel路线。

所以在我看来，我的代码不必要地长且有点贵。为了解决这个问题，我决定以模板形式编写我的操作。这就是我所做的：

1. 在store.js中，我为每个CRUD函数创建了一个 动作 ，用作 模板 < / li>
2. 在Stores.vue和AdAccounts.vue中，如果我需要执行CRUD函数，则可以使用 方法从store.js中调用相应的操作 提供 Laravel路线作为动作有效载荷的一部分
3. 我有 个州 和相应的 getters 可在Stores.vue和AdAccounts.vue中返回这些状态。 / li>
4. 每个动作都有一个专用的变异，可以更改相应的状态
在每个Vue组件中 映射
5. 状态和获取方法

这种方法有效且正确吗？我在下面提供了示例方法和操作以供参考。

---

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})
            }
        }
    }
}