v2.md

Core API

getCurrentInstance

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.

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.

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

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

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()

    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()

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

⚠️ TIPS: Where route, query and params are of type Ref.

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
  },
})