Vue 组件函数如何实现可重用？

可以创建一个允许在其他地方重用该功能的 Vue3组合。

棘手的部分是vue-router. 我们必须确保可组合内使用的路由器实际上与应用程序/组件内使用的路由器实例相同。我们不能使用useRouter()which 是在组件的设置函数中使用路由器的方法（在我们的可组合中，我们没有设置函数）。因此，我们建议将路由器定义放在一个额外的模块中，并在 App 和可组合定义之间共享该模块。

1.新建文件router.js

import {createRouter, createWebHashHistory} from 'vue-router'

const routes = [
    {path: '/', name: 'Home', component: Home},
    {path: '/login', name: 'Login', component: Login},
    ...
    {path: "/:pathMatch(.*)*", component: NotFound},
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router;

2.使用路由器模块main.js

import {createApp} from 'vue'
import router from './router.js'
import App from './components/App.vue'

const myApp = createApp(App);
myApp.use(router)
     .mount('#app');

3. 创建可组合loggin.js

import {ref} from 'vue';
import store from './store.js';  // assuming this is the file containing the store definition
import router from './router.js';

export async function authenticateIdentity() {
    const isLoggedIn = ref(store.state.securityStore.isLoggedIn);
    try {
        await store.dispatch('securityStore/autoLogin');
        if (isLoggedIn !== true) {
            return router.push({name: "Login", query: {redirect: router.currentRoute.value.path}})
        }
    } catch (error) {
        return router.push({name: "Login", query: {redirect: router.currentRoute.value.path}})
    }
}

4. 在其他组件中使用可组合

<script>
import {authenticateIdentity} from 'loggin.js'

export default {
  name: "LoginComponent",
  methods: {
    login(){
      authenticateIdentity().then( ... ).catch( ... );
    }
  }
}
</script>

（调整项目结构/导入路径/名称）