Javascript 用于更改书签按钮颜色的vue mixin

我想在我的应用程序中为一些页面添加书签。我正在将这些页面的名称和url添加到书签中。它工作得很好。当我单击书签按钮时，它会显示为书签，从而充满颜色。有很多页

我想使用mixin来切换书签按钮（如果它有书签或没有书签）。所以，我可以使用所有其他页面。我需要这方面的建议

按钮和方法的当前代码

将该页面添加为书签的方法

addToBookmark（）{
this.bookmarkSelected=！this.bookmarkSelected；
如果（已选择此书签）{
this.bookmarker='BookmarkFilled'；
这个.addUserFavorites({
名称：this.getFavorites，
url:this.$route.path
});
}否则{
this.bookmarker='Bookmark'；
}
}

---

关于切换按钮的mixin的任何建议都会很有帮助，或者如何创建mixin来更改颜色以显示添加的书签？

我认为您需要在这里扩展您的逻辑。我假设您正在通过API保存书签，因此，我可以建议您以下提示：

创建一个名为

pageBookmarked（this.$route.path）

的端点，该端点返回一个布尔值，通过这种方式，您可以检查当前页面是否已添加书签

创建另一个端点，名为

addToBookmarks（{data:extraData，url:this.$route.path}）

创建名为

removeFromBookmarks（this.$route.path）

的最后一个端点，从书签中删除当前页面

因此，现在您可以创建一个独特的Vue组件来管理bookmars：

<template>
  <div>
    <vu-button
      v-if="!loading"
      size="reduced"
      color="secondary"
      class="blue"
      :class="{ 'bookmark-active': bookmarked }"
      @click="addToBookmark"
    >
      <svg-icon :name="bookmarked ? 'BookmarkFilled' : 'Bookmark'"/>
    </vu-button>
    <span v-else>Loading</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      bookmarked: false
    };
  },
  async mounted() {
    // Check if page it's already bookmarked
    this.loading = true;
    this.bookmarked = await this.$api.pageBookmarked(this.$route.path);
    this.loading = false;
  },
  methods: {
    async addToBookmark() {
      this.loading = true;
      if (this.bookmarked) {
        this.bookmarked = false;
        await this.$api.removeFromBookmarks(this.$route.path);
      } else {
        this.bookmarked = true;
        await this.$api.addToBookmarks({ data: { name: "My Bookmark" }, url: this.$route.path })
      }
      this.loading = false;
    }
  }
};

</script>

加载
导出默认值{
数据（）{
返回{
加载：对，
书签：false
};
},
异步装入（）{
//检查页面是否已添加书签
这是。加载=真；
this.bookmarked=等待此。$api.pageBookmarked（此。$route.path）；
这一点：加载=错误；
},
方法：{
异步addToBookmark（）{
这是。加载=真；
如果（此为书签）{
this.bookmarked=false；
等待此。$api.removeFromBookmarks（此。$route.path）；
}否则{
this.bookmarked=true；
等待此消息。$api.addToBookmarks（{data:{name:{My Bookmark}，url:this.$route.path}）
}
这一点：加载=错误；
}
}
};

我认为您不需要为此创建mixin，只需全局注册此组件，就可以从项目中的每个组件访问它

---

我希望这能对你有所帮助，谢谢你的回复。我正在使用vuex添加书签操作或删除书签。那么如何更改页面书签部分。嗨！，我认为您不需要Vuex，但是，让我先问一下，您是否使用API进行书签操作？或者您正在使用Vuex操作调用API端点？请让我知道，谢谢。是的，我正在使用vuex操作调用api端点