Vuex 和 Laravel 5：如何从文章中删除标签

Question

我有一个包含文章和标签的小型博客应用。到目前为止没有什么花哨的。每篇文章可以有多个标签。

Laravel 后端通过 Vue 前端中 Axios 的 API 调用传递数据。在 Laravel 的模型文章中有一个方法

public function tags(){
        return $this->belongsToMany('App\Tag');
    }

标签反之亦然。我有一个数据透视表，所有这些都遵循https://laracasts.com/series/laravel-5-fundamentals/episodes/21 中给出的示例 这一切都很好。

现在假设我想在 Vue 中调用 deleteTag() 方法，该方法应该删除文章和标签之间的连接。幕后的事情有点复杂，因为 PHP 中的“addTag”还添加了一个新的标签模型以及数据透视表中标签和文章之间的连接，或者连接 - 如果标签已经存在 - 现有标签和文章。

实现这一目标的最佳方法是什么？

到目前为止我在做什么：

ArticleTags.vue

    deleteTag(tagName){
            let articleId = this.articleId;
            this.$store.dispatch('removeTagFromArticle', { articleId, tagName });
      },

index.js（Vuex 商店）

actions: {
    removeTagFromArticle(context,param) {
       axios.post('api/articles/delete-tag/', param)
                    .then((res) => {
                        let article = context.getters.getArticleById(param.articleId);
                        let tagName =  param.tagName;
                        context.commit('deleteTag', {article, tagName} );
                    })
                    .catch((err) => console.error(err));

    } }

mutations : {    deleteTag (state, { article, tag }) {
      let tagIndex = article.tags.indexOf(tag);
      article.tags.splice(tagIndex,1);
    } }

ArticleController.php

 /**
 * Remove Tag from Article
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function deleteTag(Request $request)
{   
    $tag = \App\Tag::firstOrCreate(array('name' => $request->tagName));
    $article = Article::findOrFail($request->articleId);

    $result = $article->tags()->detach([$tag->id]);

    $this->cleanUpTags();

    return response('true', 200);
}

routes/web.php

Route::post('api/articles/delete-tag', 'ArticleController@deleteTag');

到目前为止，这有效。代码完全按照它应该做的。只有它感觉真的很笨拙。而且可能很复杂。也许是因为这个例子很简单，但整个设置很大。 尽管如此，我正在努力改进我的编码。 :)

所以我的问题是：

1) 将Vue中的article对象而不是articleId传递给store会更好吗？

2) 在 store 中使用 Array.slice() 的想法是不是太复杂了？这可以直接在组件中完成。

3) 删除标签 PHP 后从 Laravel 重新加载整个商店是否有意义？

编辑：如果有人正在寻找这个问题以及我最后是如何解决的。这个应用的源代码可以在https://github.com/shopfreelancer/streamyourconsciousness-laravel找到

Answer 1

就我个人而言，我喜欢使用 ID 来引用任何数据库资源，并在 javascript 中保持我的对象与我的 API 有点相同。

1

在这种情况下，我会将标签更改为对象而不是字符串，并将标签的 ID 发送到我的 API。

我的文章示例如下：

let article = {
    tags: [{ id: 1, name: 'tag 1' }, { id: 2 ... }]
}

在我看来，使用对象或 ID 作为参数都很好。如果您喜欢“更简洁”的代码，我应该坚持使用对象，只有一个地方可以检查您的对象中是否存在 ID 以及 ID 的选择。

案例：

// Somehwere in code
this.deleteArticle(article);

// Somehwere else in code
this.deleteArticle(article);

// Somewhere else in code
this.deleteArticle(article);

// Function
deleteArticle(article) {
  // This check or other code will only be here instead of 3 times in code
  if (!article.hasOwnProperty('id')) {
    console.error('No id!');
  }

  let id = article.id;

  ...
}

2

通常，我会在首次初始化的组件中保留更改变量的逻辑。所以你首先告诉this.article = someApiData;。在那里有一个函数来处理删除标签的最终删除。

3

如果您正在寻找终极世界统治性能，我会删除 javascript 中的标签。您也可以只在响应中发回更新的标签列表，并使用此数据更新文章的所有标签，并保持您的代码精简。不过我还是喜欢slice()从数组中删除的标签。

记住这是我的意见。你的选择完全没问题，你应该像我自己一样，永远不要停止质疑你和其他人的代码。