docs: Adding useStore and useRouter examples

Author: microcipcip

README.md

@@ -144,3 +144,209 @@ Vue.use(VueCompositionAPI)
 - [@vue/composition-api](https://github.com/vuejs/composition-api)
 - [@vue/test-utils](https://vue-test-utils.vuejs.org/)
 - [Jest](https://jestjs.io/)
+
+## 🎁 Other examples of composition API functions
+
+Some Vue composition API functions have not been included in this library but
+can be created easily by following the steps below.
+
+<details><summary>useStore</summary><p>
+Creating a useStore function connected to Vuex store is pretty straightforward.
+First we have to export our Vuex store:
+
+```typescript
+// @src/mystore.ts
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: { searchTerm: '' },
+  mutations: {
+    SET_SEARCH(state, newVal) {
+      state.searchTerm = newVal
+    }
+  },
+  getters: { searchTerm: state => state.searchTerm },
+  actions: {},
+  modules: {}
+})
+
+export default store
+```
+
+Then we import the store and expose it in useStore function:
+
+```typescript
+// @src/useStore.ts
+import store from '@src/mystore'
+
+export function useStore() {
+  return store
+}
+```
+
+Now we can use it inside the setup() method of our component:
+
+```html
+// MyComponent.vue
+<template>
+  <input type="text" v-model="searchTerm" placeholder="🔎 Search..." />
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { ref, watch } from '@src/api'
+  import { useStore } from '@src/useStore'
+
+  export default Vue.extend({
+    name: 'UseStoreDemo',
+    setup() {
+      const { commit, getters } = useStore()
+      const searchTerm = ref(getters['searchTerm'])
+      watch(searchTerm, newVal => commit('SET_SEARCH', newVal))
+      return { searchTerm }
+    }
+  })
+</script>
+```
+
+</p></details>
+
+<details><summary>useRouter</summary><p>
+Creating a useRouter function that exposes `this.$router` and `this.$route` from VueRouter is very easy.
+First we have to export the Vue's `vm` instance:
+
+```typescript
+// @src/main.ts
+import VueCompositionAPI from '@src/api'
+import router from '@src/router'
+import App from '@src/App.vue'
+
+Vue.use(VueCompositionAPI)
+
+export const vm = new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')
+```
+
+Then we can expose `$router` and `$route` in our useRouter function:
+
+```typescript
+// @src/useRouter.ts
+import { vm } from '@src/main'
+
+export function useRouter() {
+  const route = vm.$route
+  const router = vm.$router
+  return { route, router }
+}
+```
+
+Now we can use it inside the setup() method of our component:
+
+```html
+// MyComponent.vue
+<template>
+  <div>
+    Current id: {{ id }}
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { useRouter } from '@src/useRouter'
+
+  export default Vue.extend({
+    name: 'UseRouterDemo',
+    setup() {
+      const { route } = useRouter()
+      return { id: route.params.id }
+    }
+  })
+</script>
+```
+
+Note that a drawback of this useRouter example is that it may be difficult to test since when we define `localVue`
+the `vm` instance is going to be different from the one we exported from `@src/main`.
+
+To fix this we have to create a small runtime utility function:
+
+```typescript
+// @src/runtimeHelper.ts
+const runtime = {};
+
+export const runtimeHelper {
+  set(vm) {
+    runtime.vm = vm;
+  },
+  get() {
+      if (runtime.vm) return runtime.vm;
+      throw new ReferenceError("Vue instance not found.");
+  }
+}
+```
+
+Then we have to get the `vm` on runtime:
+
+```typescript
+// @src/main.ts
+import Vue from 'vue'
+import VueCompositionAPI from '@src/api'
+import { runtimeHelper } from '@src/runtimeHelper'
+import App from '@src/App.vue'
+import router from '@src/router'
+
+Vue.use(VueCompositionAPI)
+
+new Vue({
+  router,
+  beforeCreate() {
+    // Set the runtime so that we can access the vm from anywhere
+    runtimeHelper.set(this)
+  },
+  render: h => h(App)
+}).$mount('#app')
+```
+
+Now in the useRouter function we can get the `vm` on runtime:
+
+```typescript
+// @src/useRouter.ts
+import { runtimeHelper } from '@src/runtimeHelper'
+
+export function useRouter() {
+  const vm = runtimeHelper.get()
+  const route = vm.$route
+  const router = vm.$router
+  return { route, router }
+}
+```
+
+Finally, we can test the router easily by passing the right `vm` on runtime:
+
+```typescript
+// @src/mytest.ts
+import VueRouter from 'vue-router'
+import { createLocalVue, mount } from '@vue/test-utils'
+import VueCompositionAPI from '@src/api'
+import { runtimeHelper } from '@src/runtimeHelper'
+import router from '@src/router'
+
+const localVue = createLocalVue()
+localVue.use(VueCompositionAPI)
+localVue.use(VueRouter)
+
+mount(localVue.extend(ComponentHere), {
+  localVue,
+  router,
+  beforeCreate() {
+    // Set the runtime so that we can access the vm from anywhere
+    runtimeHelper.set(this)
+  }
+})
+```
+
+</p></details>