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

Question

我有一个带有文章和标签的小型博客应用程序。到目前为止没有什么特别的。每篇文章可以有多个标签。

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

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

对于标签，反之亦然。我有一个枢轴 table 并且所有这些几乎都遵循 https://laracasts.com/series/laravel-5-fundamentals/episodes/21 中给出的示例这一切都很好。

现在假设我想在 Vue 中调用 deleteTag() 方法，该方法应该删除 Article 和 Tag 之间的连接。事情在幕后有点复杂，因为 "addTag" 在 PHP 中还添加了一个新的标签模型，并且在 Pivot table 中标签和文章之间的连接或者连接 - 如果标签已经存在- 带有文章的现有标签。

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

目前我在做什么：

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对象传递给store而不是articleId会更好吗？

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

3) 删除标签 PHP-wise 后从 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 作为参数都可以。如果您喜欢 "cleaner" 代码，我应该坚持使用对象，只有一个地方可以检查您的对象中是否存在 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() 从数组中删除标签。

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

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

Vuex and Laravel 5: how to remove Tags from Articles

laravel

vue.js

axios

vuex