ref, computed alternatives in vue 2-CodePudding

I did a project in Vue 3 and I used ref and computed. Then I realized that I was supposed to do the project in Vue 2... and now I get : "export 'computed' was not found in 'vue' "export 'ref' was not found in 'vue' ... I know that I need Vue 3 for those, that s why i want to ask if there are any alternatives:

this is where I use ref and computed:

  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`
  );

and here also:

  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"  : >

CodePudding user response：

computed is also in vue 2, but in vue 2 you need to use 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.$router.path === this.to  
    }
  }
}