从Vue 2.6(Composition API)升级到2.7的store与路由获取问题

Vue 2.7 已内置Composition API能力，无需额外安装@vue/composition-api依赖，你可以通过以下两种方式实现和之前完全一致的效果：

方式1：沿用组件实例获取的写法 #

和你之前在2.6版本的写法逻辑基本一致，只需要调整相关API的导入来源，注意要在setup的同步执行阶段获取组件实例：

// 所有Composition API统一从vue包导入
import { getCurrentInstance, ComponentInternalInstance } from "vue";

// setup内同步执行获取实例
const instance = getCurrentInstance() as ComponentInternalInstance;
// 取值逻辑和之前完全相同
const store = instance.proxy.$store;
const router = instance.proxy.$router;

注意：getCurrentInstance() 必须在setup的同步上下文中调用，如果放在setTimeout、接口请求回调等异步场景中，会返回null导致取值失败。

方式2：使用官方提供的组合式API（推荐） #

适配Vue2.7的vue-router@3.6+、vuex@3.6+版本都提供了专属的组合式调用方法，不需要依赖组件实例，写法和Vue3完全兼容，后续升级成本更低：

// 路由相关组合式API从vue-router的composables入口导入
import { useRouter } from "vue-router/composables";
// vuex的组合式API直接从vuex导入
import { useStore } from "vuex";

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

这种写法不受同步/异步上下文限制，在自定义组合函数、异步逻辑中都可以正常调用，是官方推荐的使用方式。

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