Hice un proyecto en Vue 3 y usé ref y computed . Luego me di cuenta de que se suponía que debía hacer el proyecto en Vue 2... y ahora obtengo: "exportar 'computado' no se encontró en 'vue' "exportar 'ref' no se encontró en 'vue'... I sé que necesito Vue 3 para esos, por eso quiero preguntar si hay alguna alternativa:
aquí es donde uso ref y calculo:
import { ref, computed } from "vue"; export const collapsed = ref(false); export const toggleSidebar = () => (collapsed.value = !collapsed.value); export const SIDEBAR_WIDTH = 180; export const SIDEBAR_WIDTH_COLLAPSED = 38; export const sideBarWidth = computed( () => `${collapsed.value ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH}px` );y aquí también:
import { computed } from 'vue' import { useRoute } from 'vue-router' import { collapsed } from './state' export default { props: { to: { type: String, required: true }, icon: { type: String, required: true } }, setup(props) { const route = useRoute() const isActive = computed(() => route.path === props.to) return { isActive, collapsed } } } </script> <template> <router-link :to="to" class="link" :class="{ active: isActive }" >computed también está en vue 2, pero en vue 2 necesita usar options api :
export default { data() { return { collapsed: false } }, computed: { toggleSidebar() { return this.collapsed.value = !this.collapsed.value }, sideBarWidth() { return `${this.collapsed ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH}px` } } } export default { props: { to: { type: String, required: true }, icon: { type: String, required: true } }, computed: { isActive() { return this.$route.path === this.to } } }El equipo de Vue ha proporcionado un complemento independiente para su escenario: @vue/composition-api .
Permite usar la API de Composición en proyectos de Vue2.
Todo lo que tiene que hacer es instalarlo y cambiar las importaciones de vue a @vue/composition-api .
No solo no tiene que refactorizar todo, desde la API de composición hasta la API de opciones, sino que, en caso de que el cliente decida cambiar a Vue3 en algún momento futuro, todo lo que debe hacer es cambiar las importaciones nuevamente a vue y estará listo. .