时间戳

首页 > 解决方案 > 如何减少 Vue 3 Composition API 中的样板代码（例如路由器、商店）

vue.js - 如何减少 Vue 3 Composition API 中的样板代码（例如路由器、商店）

问题描述

使用 Vue 3 组合 API，每个视图都需要具备以下条件：

import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'


export default {
    setup() {
        const router = useRouter()
        const store = useStore()

        // ...
     }
}

有没有办法以某种方式只声明一次，将它们传递给创建的应用程序，然后在应用程序视图中简单地使用它们而不需要这些声明？使用 vue2，这些是在应用程序初始化时传递的，然后this.$store/this.$router简单地工作。

一个带有全局变量的想法，它很容易引起问题：在 中app.vue，这些可以像这样声明一次：

import { useStore } from 'vuex'

export default {
    setup() {
        globalthis.store = useStore()

然后store将在任何地方工作。

标签： vue.jsvuejs3vue-composition-api

解决方案

组件实例不可用，setup()因为组件尚未创建，因此this组合 API 中没有上下文可使用this.$store。

setup() 我相信在没有任何其他导入的情况下使存储/路由器变量可用的唯一方法是将它们附加到window/globalThis作为全局变量（忽略 globals 的警告）：

// router.js
import { createRouter } from 'vue-router'
export default createRouter({/*...*/})

// store.js
import { createStore } from 'vuex'
export default createStore({/*...*/})

// main.js
import router from './router'
import store from './store'

window.$router = router
window.$store = store

请注意，对于 Vuex 4 和 Vue Router 4，选项 API和模板中的 store 和 router 仍然可用，分别为$store和：$router

<template>
  <div>{{ $store.state.myProp }}</div>
  <button @click="$router.back()">Back</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$store.state.myProp)
    console.log(this.$router.currentRoute)
  }
}
</script>

推荐阅读