v3.md

Core API

getCurrentInstance (Added in v2.2.0)

Get the current Vue Component Instance.

import { defineComponent, onMounted } from 'vue'
import { getCurrentInstance } from 'vue-composition-wrapper'

export default defineComponent({
  setup() {
    const app = getCurrentInstance()

    onMounted(() => {
      // You can access the properties and methods on the Vue instance from `app`
      console.log(app)
    })
  },
})

useContext

Get the current Vue Component Instance context.

⚠️ Please use getCurrentInstance instead.

import { defineComponent, onMounted } from 'vue'
import { useContext } from 'vue-composition-wrapper'

export default defineComponent({
  setup() {
    const { app, store, route, router, query, params } = useContext()

    onMounted(() => {
      // You can access the properties and methods on the Vue instance from `app`
      console.log(app)
    })
  },
})

⚠️⚠️⚠️ TIPS: For a friendly transition to vuex 4.x, vue-router 4.x, please do not use store, route, router, query and params in useContext. Please use useStore, useRoute and useRouter instead.

useStore

Access store。

import { defineComponent, onMounted, computed } from 'vue'
import { useStore } from 'vue-composition-wrapper'
export default defineComponent({
  setup() {
    const store = useStore()

    // state
    const someStateInStore = computed(() => store.state.some.value)

    // getters
    const someGettersInStore = computed(() => store.getters['some/path'])

    onMounted(() => {
      // mutations
      store.commit('some/SOME_MUTATION', 'foo')
      // actions
      store.dispatch('some/actions', 'bar')
    })

    return {
      someStateInStore,
      someGettersInStore,
    }
  },
})

IF you use Typescript, Use generic parameters to provide a type definitions for state:

import { defineComponent, onMounted, computed } from 'vue'
import { useStore } from 'vue-composition-wrapper'
import { RootState } from '@/store'

export default defineComponent({
  setup() {
    const store = useStore<RootState>()

    // state
    const someStateInStore = computed(() => store.state.some.value)

    return {
      someStateInStore,
    }
  },
})

useRouter

Access current Router Object.

More details see useRouter

import { defineComponent, onMounted } from 'vue'
import { useRoute } from 'vue-composition-wrapper'
export default defineComponent({
  setup() {
    const router = useRouter()

    const linkTo = (path) => {
      router.push(path)
    }

    return {
      linkTo,
    }
  },
})

useRoute

Access the current routing information object.

More details see useRoute

import { defineComponent, onMounted } from 'vue'
import { useRoute } from 'vue-composition-wrapper'
export default defineComponent({
  setup() {
    const route = useRoute() // now, returns a non-ref (in v2, returns a ComputedRef)

    onMounted(() => {
      console.log(route)
    })
  },
})

useRouteQuery

Access the query in the current routing information.

import { defineComponent, onMounted } from 'vue'
import { useRouteQuery } from 'vue-composition-wrapper'
export default defineComponent({
  setup() {
    const query = useRouteQuery() // returns a ComputedRef

    onMounted(() => {
      console.log(query.value) 
    })
  },
})

useRouteParams

Access the params in the current routing information.

import { defineComponent, onMounted } from 'vue'
import { useRouteParams } from 'vue-composition-wrapper'
export default defineComponent({
  setup() {
    const params = useRouteParams() // returns a ComputedRef

    onMounted(() => {
      console.log(params.value) 
    })
  },
})

⚠️ TIPS: Where query and params are of type ComputedRef.

onBeforeRouteLeave (added in v3.0.0)

Add a navigation guard that triggers whenever the component for the current location is about to be left. Similar to beforeRouteLeave but can be used in any component. The guard is removed when the component is unmounted.

More details see onBeforeRouteLeave

onBeforeRouteUpdate (added in v3.0.0)

Add a navigation guard that triggers whenever the current location is about to be updated. Similar to beforeRouteUpdate but can be used in any component. The guard is removed when the component is unmounted.

More details see onBeforeRouteUpdate

useLink (added in v3.0.0)

More details see useLink

Heplers

vue-composition-wrapper will also provide some useful utility composition functions for you to use.

wrapProperty

You can create custom helper for any Vue instance property.

You may wish to create a custom helper that "transforms" non-synthesis API properties into composition-ready properties. wrapProperty enables you to do this easily, returning a computed property or a plain property as appropriate.

The second argument is a boolean indicating whether the helper function should return a computed property, defaults to true.

import { wrapProperty } from 'vue-composition-wrapper'
import { defineComponent } from 'vue'

// For example, for used with https://github.com/danielroe/typed-vuex
const useAccessor = wrapProperty('$accessor', false)

export default defineComponent({
  setup() {
    const accessor = useAccessor()
    // You can now access a fully typed store accessor in your component
  },
})