Question

使用 Vue 3 Composition 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 可以在任何地方工作。

Answer 1

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

我相信使 store/router 变量在 setup() 没有任何其他导入可用的唯一方法是将它们附加到 window/globalThis 作为全局变量（忽略 caveats of 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，商店和路由器仍然分别可用 in the Options API 和 within the template 作为 $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>

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

1 个答案: