feat(hooks): add useStore hook

Author: u3u

src/__tests__/useStore.test.ts

@@ -0,0 +1,51 @@
+import { Store } from 'vuex';
+import useStore from '../useStore';
+import renderHook from '../util/renderHook';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    store: Store<any>;
+  }
+}
+
+describe('useStore', () => {
+  it('should be defined', () => {
+    expect(useStore).toBeDefined();
+  });
+
+  it('should have store property', () => {
+    const { vm } = renderHook((context) => ({ store: useStore(context) }));
+    expect(vm).toHaveProperty('store');
+  });
+
+  it('should update store', () => {
+    const { vm } = renderHook((context) => ({ store: useStore(context) }));
+    expect(vm.store.state.count).toBe(0);
+    expect(vm.store.getters.plusOne).toBe(1);
+    expect(vm.store.state.test.count).toBe(0);
+    expect(vm.store.getters['test/minusOne']).toBe(-1);
+
+    vm.store.commit('increment');
+    vm.store.commit('test/decrement');
+
+    expect(vm.store.state.count).toBe(1);
+    expect(vm.store.getters.plusOne).toBe(2);
+    expect(vm.store.state.test.count).toBe(-1);
+    expect(vm.store.getters['test/minusOne']).toBe(-2);
+
+    vm.store.dispatch('incrementAsync', 0);
+    vm.store.dispatch('test/decrementAsync', 0);
+
+    expect(vm.store.state.count).toBe(1);
+    expect(vm.store.getters.plusOne).toBe(2);
+    expect(vm.store.state.test.count).toBe(-1);
+    expect(vm.store.getters['test/minusOne']).toBe(-2);
+
+    setTimeout(() => {
+      expect(vm.store.state.count).toBe(2);
+      expect(vm.store.getters.plusOne).toBe(3);
+      expect(vm.store.state.test.count).toBe(-2);
+      expect(vm.store.getters['test/minusOne']).toBe(-3);
+    }, 0);
+  });
+});

src/mocks/index.ts

@@ -0,0 +1,4 @@
+import Router from './router';
+import Store from './store';
+
+export { Router, Store };

src/mocks/router.ts

@@ -0,0 +1,20 @@
+import { VueConstructor } from 'vue';
+import VueRouter from 'vue-router';
+
+export default function register(localVue: VueConstructor) {
+  localVue.use(VueRouter);
+  return new VueRouter({
+    routes: [
+      {
+        path: '/',
+        name: 'index',
+        meta: { title: 'Vue Hooks' },
+      },
+      {
+        path: '*',
+        name: '404',
+        meta: { title: '404 - Not Found' },
+      },
+    ],
+  });
+}

src/mocks/store.ts

@@ -0,0 +1,61 @@
+import { VueConstructor } from 'vue';
+import Vuex, { Module } from 'vuex';
+
+export interface CounterState {
+  count: number;
+}
+
+export default function register(localVue: VueConstructor) {
+  localVue.use(Vuex);
+  return new Vuex.Store<CounterState>({
+    state: {
+      count: 0,
+    },
+
+    actions: {
+      incrementAsync(context, delay = 1000) {
+        setTimeout(() => {
+          context.commit('increment');
+        }, delay);
+      },
+    },
+
+    mutations: {
+      increment(state) {
+        Object.assign(state, { count: state.count + 1 });
+      },
+    },
+
+    getters: {
+      plusOne: (state) => state.count + 1,
+    },
+
+    modules: {
+      test: {
+        namespaced: true,
+
+        state: {
+          count: 0,
+        },
+
+        actions: {
+          decrementAsync(context, delay = 1000) {
+            setTimeout(() => {
+              context.commit('decrement');
+            }, delay);
+          },
+        },
+
+        mutations: {
+          decrement(state) {
+            Object.assign(state, { count: state.count - 1 });
+          },
+        },
+
+        getters: {
+          minusOne: (state) => state.count - 1,
+        },
+      } as Module<CounterState, CounterState>,
+    },
+  });
+}

src/useStore.ts

@@ -0,0 +1,8 @@
+import { computed } from 'vue-function-api';
+import { Store } from 'vuex';
+import withContext from './util/withContext';
+
+export default withContext(function useStore<TState>(vue) {
+  const store = computed(() => vue.$store as Store<TState>);
+  return store;
+});

src/util/renderHook.ts

@@ -1,28 +1,14 @@
 /* eslint import/no-extraneous-dependencies: off */
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { plugin, createComponent } from 'vue-function-api';
-import VueRouter from 'vue-router';
+import { Router, Store } from '../mocks';
 
 const localVue = createLocalVue();
+const router = Router(localVue);
+const store = Store(localVue);
 
-localVue.use(VueRouter);
 localVue.use(plugin);
 
-const router = new VueRouter({
-  routes: [
-    {
-      path: '/',
-      name: 'index',
-      meta: { title: 'Vue Hooks' },
-    },
-    {
-      path: '*',
-      name: '404',
-      meta: { title: '404 - Not Found' },
-    },
-  ],
-});
-
 export default function renderHook(hook: Function) {
   const App = createComponent({
     template: `
@@ -39,6 +25,7 @@ export default function renderHook(hook: Function) {
   return shallowMount(App, {
     localVue,
     router,
+    store,
     stubs: ['router-view'],
   });
 }