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作为参数都很好。如果你愿意，我应该坚持使用对象＆＃34;更清洁＆＃34;代码，只有一个地方可以检查您的对象中是否存在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：如何从文章中删除标签

1 个答案: