v-data-table의 문제를 표시하는 ProjectPage.vue 페이지가 있습니다. 항목은 사이드바의 서버 API 호출에서 검색되어 거기에 표시됩니다. 프로젝트를 선택한 후 프로젝트 ID를 사용하여 서버에서 해당 문제를 가져오고 싶습니다. Vuex를 사용하여 이 작업을 수행할 수 있습니까?

프로젝트 수에는 제한이 없으므로 모든 프로젝트가 동일한 .js 파일을 사용하여 문제를 검색할 수 있도록 Vuex를 사용할 수 있습니까?

내가 원하는 것은 ID와 항목을 VerticalNavMenu.vue에서 ProjectPage로 소품으로 전달하여 문제를 검색하기 위해 ProjectPage 내부의 mapAction에 ID를 매개변수로 전달할 수 있도록 하는 것입니다.

지금 하고 있는 방법이 안되네요. 프로젝트 테이블을 열면 테이블에 사용 가능한 데이터가 없습니다

Peoject_Pages.js가 내 문제를 이해하는 데 도움이 되기를 바랍니다.

VerticalNavMenu.vue(관련 템플릿 동작 38 -> 48)

NavBar.js

ProjectPage.vue

Project_Page.js

<template>
  <v-navigation-drawer
    :value="isDrawerOpen"
    app
    expand-on-hover
    mini-variant-width="60px"
    floating
    width="260"
    class="app-navigation-menu"
    :right="$vuetify.rtl"
    @input="val => $emit('update:is-drawer-open', val)"
  >
    <!-- Navigation Header -->
    <div class="vertical-nav-header d-flex items-center ps-6 pe-5 pt-5 pb-2">
      <router-link to="/" class="d-flex align-center text-decoration-none">
        <v-slide-x-transition>
          <h2 class="app-title text--primary">ITrackerHub</h2>
        </v-slide-x-transition>
      </router-link>
    </div>

    <!-- Navigation Items -->
    <v-list expand shaped class="vertical-nav-menu-items pr-5">
      <nav-menu-link
        title="Dashboard"
        :to="{ name: 'dashboard' }"
        :icon="icons.mdiHomeOutline"
      ></nav-menu-link>

      <v-list>
        <v-list-group :prepend-icon="icons.mdiTelevisionGuide">
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title v-text="'My Projects'"></v-list-item-title>
            </v-list-item-content>
          </template>

          <v-list-item v-for="(project, index) in ProjectList" :key="index">
            <v-icon class="mx-2">{{ icons.mdiAccountGroup }}</v-icon>
            <v-list-item-content>
              <router-link
                class="d-flex align-center text-decoration-none black--text"
                :to="{ name: 'ProjectPage', params: { id: project.id, project} }"
              >
                {{ project.title }}
              </router-link>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
      </v-list>

      <nav-menu-link title="My Issues" :to="{ name: 'MyIssues' }" :icon="icons.mdiBookEditOutline"></nav-menu-link>
      <nav-menu-link
        style="position:relative; top:70px;"
        title="Account Settings"
        :to="{ name: 'pages-account-settings' }"
        :icon="icons.mdiAccountCogOutline"
      ></nav-menu-link>

      <nav-menu-link
        style="position: relative; top: 200px"
        title="Create Project"
        :to="{ name: 'CreateProject' }"
        :icon="icons.mdiPlusMinus"
      ></nav-menu-link>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
// eslint-disable-next-line object-curly-newline
import {
  mdiHomeOutline,
  mdiAlphaTBoxOutline,
  mdiEyeOutline,
  mdiCreditCardOutline,
  mdiTable,
  mdiFileOutline,
  mdiFormSelect,
  mdiAccountCogOutline,
  mdiAccountGroup,
  mdiAccountMultiple,
  mdiTelevisionGuide,
  mdiBookEditOutline,
  mdiPlusMinus,
} from '@mdi/js'

// import NavMenuSectionTitle from './components/NavMenuSectionTitle.vue'
import NavMenuGroup from './components/NavMenuGroup.vue'
import NavMenuLink from './components/NavMenuLink.vue'
import { mapGetters, mapActions } from 'vuex'


export default {
  components: {
    // NavMenuSectionTitle,
    NavMenuGroup,
    NavMenuLink,
  },
 
  computed: {
    ...mapGetters(['ProjectList'])
  },
  

  methods: {
    ...mapActions(['fetchProjects'])
  },

  created() {
    // this.getProjectList()
    this.fetchProjects()
  },

  props: {
    isDrawerOpen: {
      type: Boolean,
      default: null,
    },
  },

  setup() {
    return {
      icons: {
        mdiHomeOutline,
        mdiAlphaTBoxOutline,
        mdiEyeOutline,
        mdiCreditCardOutline,
        mdiTable,
        mdiFileOutline,
        mdiFormSelect,
        mdiAccountCogOutline,
        mdiAccountGroup,
        mdiAccountMultiple,
        mdiTelevisionGuide,
        mdiBookEditOutline,
        mdiPlusMinus,
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.app-title {
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.3px;
}

// ? Adjust this `translateX` value to keep logo in center when vertical nav menu is collapsed (Value depends on your logo)
.app-logo {
  transition: all 0.18s ease-in-out;
  .v-navigation-drawer--mini-variant & {
    transform: translateX(-10px);
  }
}

@include theme(app-navigation-menu) using ($material) {
  background-color: map-deep-get($material, 'background');
}

.app-navigation-menu {
  .v-list-item {
    &.vertical-nav-menu-link {
      ::v-deep .v-list-item__icon {
        .v-icon {
          transition: none !important;
        }
      }
    }
  }
}
</style>