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

Question

我有一个小文章和标签的博客应用程序。到目前为止没什么好看的。每篇文章都可以有很多标签。

Laravel后端通过Vue前端的Axios API调用提供数据。在Laravel模型中，Article有一种方法

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

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

现在假设我想在Vue中调用deleteTag（）方法，该方法应该删除Article和Tag之间的连接。幕后的事情有点复杂，因为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);
}

路线/ web.php

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

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

所以我的问题是：

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

2）在商店中使用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()从数组中删除的标签。

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