Vue3 <script setup>语法使用报错问题求助

你的问题出在<script setup>语法中不存在this上下文，原来基于选项式API的this.$store和this.$router写法不再适用。

修改后的代码如下：

<template>
  <button class="nav-link" @click.prevent="logOut">LogOut</button>
  <RouterView />
  <DarkMode />
</template>

<script setup lang="ts">
import DarkMode from './components/DarkMode.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()

const logOut = () => {
  store.dispatch('auth/logout')
  router.push('/login')
}
</script>

<style lang="scss"></style>

关键修改点： #

• 导入Vuex的useStore和Vue Router的useRouter组合式API钩子
• 通过钩子函数创建store和router实例
• 用实例调用dispatch和push方法，替代原有的this写法

<script setup>是组合式API的语法糖，它没有选项式API中的组件实例this，必须通过对应的钩子函数获取store、router这类全局对象的实例。

内容的提问来源于stack exchange，提问作者Miangel