include在typescript和Vue 3中如何使用？

Question

我有以下代碼使用VueJS 3, Typescript 做一個小的function 區分isAdmin 來顯示列表菜單。 這是我的代碼：

<template>
  <div>
    <aside
      class="z-20 flex-shrink-0 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block h-full border-r border-gray-200 dark:border-gray-700">
      <div class="py-4 text-gray-500 dark:text-gray-400">
        <router-link  class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200" to="/">
          Company
        </router-link>
        <ul class="mt-12">
          <li   class="relative px-6 py-1" v-for="page in pages" :key="page.name" >
            <router-link exact-active-class="bg-purple-400 text-white" 
            v-if="page.role.includes(isAdmin)" //ERROR
              class="inline-flex items-center w-full text-sm font-semibold transition duration-200 ease-in hover:bg-purple-500 hover:text-white  py-2 px-2 rounded-lg "
              :to="`/${page.to}`">
              <component :is="page.icon" class="flex-shrink-0 h-6 w-6" aria-hidden="true" />
              <span  class="ml-4">{{ page.name }}</span>            
            </router-link>           
          </li>        
        </ul>       
      </div>
    </aside>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { HomeIcon, AdjustmentsIcon, FolderOpenIcon , CursorClickIcon, ClipboardListIcon, DuplicateIcon, MenuIcon, ChartPieIcon, CollectionIcon, FolderIcon  } from "@heroicons/vue/outline";
import { useRoute } from "vue-router";
const showByRole = ref<boolean>(false)
const isPagesMenuOpen = ref(false);
const active = ref<boolean>(false);
const isAdmin = ref<number>()

const route = useRoute()

const checkpath = computed(() =>{
  return route.name
})

watch(checkpath, ()=>{
  if(checkpath.value == 'aws3detail'){
  active.value = true
}
})
const pages = [
  {
    name: 'Dashboard',
    icon: HomeIcon,
    to: '',
    role: [0,1]
  },

  {
    name: 'Quản lý người dùng',
    icon: MenuIcon,
    to: 'user',
    role: [1]
  },

  {
    name: 'Quản lý File',
    icon: FolderIcon ,
    to: 'files',
    role: [0,1]
  },
  {
    name: 'AWS 3 STORAGE',
    icon: FolderOpenIcon ,
    to: 'aws3',
    role: [1]
  },
  {
    name: 'Login',
    icon: CollectionIcon,
    to: 'login',
    role: 'admin'
  },
  {
    name: 'Config',
    icon: AdjustmentsIcon,
    to: 'config',
    role: [1]
  }
]
const checkUser = JSON.parse(localStorage.getItem('user')||'{}')
console.log("checkUser", checkUser.is_admin)
//v-if= isAdmin == item.role.includes(checkUser.is_admin)
 isAdmin.value = checkUser.is_admin
</script>

它給出了錯誤：'number | 類型的參數 undefined' 不可分配給 'never' 類型的參數。 類型“undefined”不可分配給類型“never”.ts(2345)

當我查看包含 function 的屬性時，它顯示以下內容： method) includes(arg0: never, arg1: number | undefined): boolean

有什么解決辦法嗎？ 謝謝

Answer 1

解決方案：

• 出於最佳實踐原因，將您的“ isAdmin.value ”賦值放在“ OnBeforeMount ”中。
• 像下面的代碼一樣為“ checkUser ”添加一個類型

如果下面的代碼解決了您的問題，請提供反饋，隨時詢問評論中的所有內容並將您的帖子置於已解決狀態。

 <script setup lang=ts>... onBeforeMount(() => { const checkUser: {is_admin?: number} = JSON.parse(localStorage.getItem('user')||'{}'); isAdmin.value = checkUser.is_admin; }); ... </script>