Clean up vuex store usage a little.

src/components/Controls.vue

@@ -11,9 +11,8 @@
 <script lang="ts">
 import '@/assets/shared.css';
 import { Component } from '@/layout';
-import { key } from '@/store/app'
+import { useStore } from '@/store/app'
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
 import ControlComponents from './Controls/Registry';
 
 export default defineComponent({
@@ -22,7 +21,7 @@ export default defineComponent({
     ...ControlComponents.components
   },
   setup() {
-    const store = useStore(key)
+    const store = useStore()
     const component = computed(() => store.state.selectedComponent)
     const controls = computed(() => {
       let controlComponent = Object.getPrototypeOf(component.value);

src/components/Controls/FlexComponentControls.vue

@@ -25,10 +25,9 @@
 
 <script lang="ts">
 import { FlexComponent } from '@/layout'
-import { key } from '@/store/app'
+import { useStore } from '@/store/app'
 import { FLEX_SET_DIRECTION, FLEX_SET_DISTRIBUTION, FLEX_SET_SPACING } from '@/store/mutation-types'
 import { computed, defineComponent, PropType, toRefs } from 'vue'
-import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'FlexComponentControls',
@@ -39,7 +38,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const store = useStore(key)
+    const store = useStore()
     const { component } = toRefs(props)
     
     return {

src/components/Controls/InsetComponentControls.vue

@@ -27,10 +27,9 @@
 
 <script lang="ts">
 import InsetComponent from '@/layout/InsetComponent';
-import { key } from '@/store/app'
+import { useStore } from '@/store/app'
 import { INSET_SET_INSETS } from '@/store/mutation-types';
 import { computed, defineComponent, PropType, toRefs } from 'vue'
-import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'InsetComponentControls',
@@ -42,7 +41,7 @@ export default defineComponent({
   },
   setup(props) {
     const { component } = toRefs(props);
-    const store = useStore(key);
+    const store = useStore();
 
     return {
       top: computed({

src/components/Controls/SourceComponentControls.vue

@@ -15,10 +15,9 @@
 
 <script lang="ts">
 import SourceComponent from '@/layout/SourceComponent'
-import { key } from '@/store/app'
+import { useStore } from '@/store/app'
 import { SOURCE_SET_SOURCE } from '@/store/mutation-types'
 import { computed, defineComponent, PropType, toRefs } from 'vue'
-import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'SourceComponentControls',
@@ -29,7 +28,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const store = useStore(key)
+    const store = useStore()
     const { component } = toRefs(props)
 
     return {

src/components/Preview.vue

@@ -1,23 +1,22 @@
 <template>
-  <div class="bg-gray-200 dark:bg-gray-800 w-full h-full p-4">
-    <div class="overflow-hidden h-full w-full relative" v-observe-resize="didChangeSize">
-      <canvas ref="canvas" class='bg-white dark:bg-black absolute' width="1920" height="1080"></canvas>
+  <div class="w-full h-full p-4 bg-gray-200 dark:bg-gray-800">
+    <div class="relative w-full h-full overflow-hidden" v-observe-resize="didChangeSize">
+      <canvas ref="canvas" class='absolute bg-white dark:bg-black' width="1920" height="1080"></canvas>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { key } from '@/store/app'
+import { useStore } from '@/store/app'
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useStore } from 'vuex'
 import { LayoutNode } from '@/layout'
 import { Size } from '@/layout'
 import { usePreferredDark } from '@vueuse/core'
 
 export default defineComponent({
   name: 'Preview',
   setup() {
-    const store = useStore(key)
+    const store = useStore()
     const scale = ref(1);
     const canvas = ref<HTMLCanvasElement | null>(null);
 

src/components/Sidebar.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="w-72 bg-gray-200 macos:bg-transparent">
+  <div class="bg-gray-200 w-72 macos:bg-transparent">
     <tree-control v-if="component" :component="component"></tree-control>
   </div>
 </template>
 
 <script lang="ts">
-import { key } from '@/store/app';
+import { useStore } from '@/store/app';
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex';
 import TreeControl from './Sidebar/TreeControl.vue';
 
 export default defineComponent({
@@ -16,7 +15,7 @@ export default defineComponent({
     TreeControl
   },
   setup() {
-    const store = useStore(key)
+    const store = useStore()
     return {
       component: computed(() => store.state.rootComponent)
     }

src/components/Sidebar/TreeControl.vue

@@ -39,8 +39,7 @@ import {
   DisclosurePanel,
 } from '@headlessui/vue';
 import { ChevronRightIcon } from '@heroicons/vue/solid';
-import { useStore } from 'vuex';
-import { key } from '@/store/app';
+import { useStore } from '@/store/app';
 import { ADD_CHILD, SELECT_COMPONENT, EMBED_IN_COMPONENT } from '@/store/mutation-types';
 
 interface ContainerAction {
@@ -67,7 +66,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const store = useStore(key)
+    const store = useStore()
     const { component } = toRefs(props);
 
     const selectComponent = () => {

src/store/app.ts

@@ -3,7 +3,7 @@ import ContainerComponent from '@/layout/ContainerComponent'
 import InsetComponent from '@/layout/InsetComponent'
 import Insets from '@/layout/Insets'
 import { InjectionKey } from '@vue/runtime-core'
-import { createStore, Store } from 'vuex'
+import { createStore, useStore as baseUseStore, Store } from 'vuex'
 
 import { 
   SELECT_COMPONENT,
@@ -107,3 +107,7 @@ export const store = createStore<State>({
     }
   ]
 })
+
+export function useStore(): Store<State> {
+  return baseUseStore(key)
+}