vue3 +pinia 实现 tagsview标签导航栏

在 Vue3 中结合使用 Pinia (Vue 的状态管理模式) 和 Vuetify 的 TagsView 组件可以实现一个动态的标签导航栏。首先，你需要安装必要的依赖：

npm install vuetify @vue/pinia

以下是步骤和示例代码：

1. 设置 upPinia 容器：创建一个名为 `store.js` 的文件，用于设置 Pinia 的 store。

import { createApp, h, ref } from 'vue';
import { createStore } from '@vue/pinia';
import TagsView from 'vuetify/components/VTags';

export default createStore({
  id: 'tags',
  state() {
    return {
      tags: ref([]), // 存储所有标签
    };
  },
  actions: {
    addTag(newTag) {
      this.$state.tags.value.push(newTag);
    },
    removeTag(tagToRemove) {
      this.$state.tags.value = this.$state.tags.value.filter((tag) => tag !== tagToRemove);
    },
  },
});

2. 在组件中导入并使用 TagsView 和 store：

<template>
  <v-app>
    <v-content class="fill-height">
      <tags-view :items="tags" @item-click="handleItemClick">
        <span v-for="tag in $store.state.tags" :key="tag">{{ tag }}</span>
      </tags-view>
      <button @click="addTag('新标签')">添加标签</button>
      <button @click="removeTag($store.state.tags[0])">删除第一个标签</button>
    </v-content>
  </v-app>
</template>

<script>
import { useStore } from '@vue/pinia';
import TagsView from 'vuetify/components/VTags';

export default {
  components: {
    TagsView,
  },
  setup() {
    const store = useStore('tags');
    
    const handleClick = (tag) => {
      console.log(`点击了标签 ${tag}`);
      // 根据实际需求处理点击事件，比如路由跳转等
    };

    return {
      tags: store.state.tags,
      handleItemClick: handleClick,
    };
  },
};
</script>

3. 配置 Vuetify 和路由（如果需要的话）。确保已经在项目中配置了 Vuetify，并且已经设置了合适的路由规则以便于切换标签对应的页面。