Merge pull request #24 from grantjbutler/pinia

Migrate from Vuex to Pinia
grantjbutler · Feb 12, 2022 · d3a02c7 · d3a02c7
2 parents c8b5394 + b16a319
commit d3a02c7
Show file tree

Hide file tree

Showing 20 changed files with 281 additions and 291 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,8 +63,8 @@
     "lodash": "^4.17.21",
     "obs-websocket-js": "^4.0.3",
     "on-change": "^4.0.0",
+    "pinia": "^2.0.11",
     "uuid": "^8.3.2",
-    "vue": "3.2.30",
-    "vuex": "^4.0.2"
+    "vue": "3.2.30"
   }
 }
diff --git a/packages/renderer/src/components/ConnectionState.vue b/packages/renderer/src/components/ConnectionState.vue
@@ -7,14 +7,14 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { useStore } from '/@/store/app';
+import { useObsStore } from '/@/store/obs';
 import { OBSConnectionState } from '../../../shared/src/obs';
 
 const props = defineProps<{
   size: 'small' | 'medium'
 }>();
 
-const store = useStore();
+const store = useObsStore();
 
 const sizeClasses = computed(() => {
   switch (props.size) {
@@ -29,7 +29,7 @@ const sizeClasses = computed(() => {
 
 // eslint-disable-next-line vue/return-in-computed-property
 const backgroundColor = computed(() => {
-  switch (store.state.connectionState) {
+  switch (store.connectionState) {
     case OBSConnectionState.Connecting:
       return 'bg-yellow-500';
     case OBSConnectionState.Connected:
@@ -41,7 +41,7 @@ const backgroundColor = computed(() => {
 });
 // eslint-disable-next-line vue/return-in-computed-property
 const title = computed(() => {
-  switch (store.state.connectionState) {
+  switch (store.connectionState) {
     case OBSConnectionState.Disconnected:
       return 'Disconnected';
     case OBSConnectionState.Connecting:

diff --git a/packages/renderer/src/components/Controls.vue b/packages/renderer/src/components/Controls.vue
@@ -16,12 +16,12 @@
 
 <script lang="ts" setup>
 import { Component } from '/@/layout';
-import { useStore } from '/@/store/app';
+import { useLayoutStore } from '/@/store/layout';
 import { computed } from 'vue';
 import ControlComponents from './Controls/Registry';
 
-const store = useStore();
-const component = computed(() => store.state.selectedComponent);
+const store = useLayoutStore();
+const component = computed(() => store.selectedComponent);
 
 const controls = computed(() => {
   let controlComponent = Object.getPrototypeOf(component.value);
@@ -35,31 +35,4 @@ const controls = computed(() => {
   } while (controlComponent instanceof Component);
   return controlsComponents.reverse();
 });
-
-// export default defineComponent({
-//   name: 'Controls',
-//   components: {
-//     ...ControlComponents.components,
-//   },
-//   setup() {
-//     const store = useStore();
-//     const component = computed(() => store.state.selectedComponent);
-//     const controls = computed(() => {
-//       let controlComponent = Object.getPrototypeOf(component.value);
-//       let controlsComponents = [];
-//       do {
-//         let control: any = ControlComponents.registry.get(controlComponent.constructor);
-//         if (control) {
-//           controlsComponents.push(control);
-//         }
-//         controlComponent = Object.getPrototypeOf(controlComponent);
-//       } while (controlComponent instanceof Component);
-//       return controlsComponents.reverse();
-//     });
-//     return {
-//       controls,
-//       component,
-//     };
-//   },
-// });
 </script>
diff --git a/packages/renderer/src/components/Controls/FlexComponentControls.vue b/packages/renderer/src/components/Controls/FlexComponentControls.vue
@@ -35,8 +35,7 @@
 
 <script lang="ts" setup>
 import type { FlexComponent } from '/@/layout';
-import { useStore } from '/@/store/app';
-import { FLEX_SET_DIRECTION, FLEX_SET_DISTRIBUTION, FLEX_SET_SPACING } from '/@/store/mutation-types';
+import { setDirection, setDistribution, setSpacing } from '/@/store/components/flex';
 import { useIsWindows } from '/@/integration/platform';
 import { computed } from 'vue';
 
@@ -48,19 +47,18 @@ const props = defineProps<{
   component: FlexComponent
 }>();
 
-const store = useStore();
 const isWindows = useIsWindows();
 
 const direction = computed({
   get(): 'horizontal' | 'vertical' { return props.component.direction; },
-  set(direction: 'horizontal' | 'vertical') { store.commit(FLEX_SET_DIRECTION, direction); },
+  set(direction: 'horizontal' | 'vertical') { setDirection(direction); },
 });
 const distribution = computed({
   get(): 'leading' | 'center' | 'trailing' { return props.component.distribution; },
-  set(distribution: 'leading' | 'center' | 'trailing') { store.commit(FLEX_SET_DISTRIBUTION, distribution); },
+  set(distribution: 'leading' | 'center' | 'trailing') { setDistribution(distribution); },
 });
 const spacing = computed({
   get() { return props.component.spacing; },
-  set(spacing: number) { store.commit(FLEX_SET_SPACING, spacing); },
+  set(spacing: number) { setSpacing(spacing); },
 });
 </script>
diff --git a/packages/renderer/src/components/Controls/InsetComponentControls.vue b/packages/renderer/src/components/Controls/InsetComponentControls.vue
@@ -22,8 +22,7 @@
 
 <script lang="ts" setup>
 import type InsetComponent from '/@/layout/InsetComponent';
-import { useStore } from '/@/store/app';
-import { INSET_SET_INSETS } from '/@/store/mutation-types';
+import { setInsets } from '/@/store/components/inset';
 import { computed } from 'vue';
 import FormNumberInput from '/@/components/Form/FormNumberInput.vue';
 import Controls from './Controls.vue';
@@ -32,14 +31,12 @@ const props = defineProps<{
   component: InsetComponent
 }>();
 
-const store = useStore();
-
 const top = computed({
   get() { return props.component.insets.top; },
   set(newValue: number) {
     const insets = props.component.insets;
     insets.top = newValue;
-    store.commit(INSET_SET_INSETS, insets);
+    setInsets(insets);
   },
 });
 
@@ -48,7 +45,7 @@ const left = computed({
   set(newValue: number) {
     const insets = props.component.insets;
     insets.left = newValue;
-    store.commit(INSET_SET_INSETS, insets);
+    setInsets(insets);
   },
 });
 
@@ -57,7 +54,7 @@ const bottom = computed({
   set(newValue: number) {
     const insets = props.component.insets;
     insets.bottom = newValue;
-    store.commit(INSET_SET_INSETS, insets);
+    setInsets(insets);
   },
 });
 
@@ -66,7 +63,7 @@ const right = computed({
   set(newValue: number) {
     const insets = props.component.insets;
     insets.right = newValue;
-    store.commit(INSET_SET_INSETS, insets);
+    setInsets(insets);
   },
 });
 </script>
diff --git a/packages/renderer/src/components/Controls/SourceComponentControls.vue b/packages/renderer/src/components/Controls/SourceComponentControls.vue
@@ -16,8 +16,8 @@
 
 <script lang="ts" setup>
 import type SourceComponent from '/@/layout/SourceComponent';
-import { useStore } from '/@/store/app';
-import { SOURCE_SET_SOURCE } from '/@/store/mutation-types';
+import { setSource } from '/@/store/components/source';
+import { useObsStore } from '/@/store/obs';
 import { computed } from 'vue';
 import FormSelect from '/@/components/Form/FormSelect.vue';
 import Controls from './Controls.vue';
@@ -26,15 +26,15 @@ const props = defineProps<{
   component: SourceComponent
 }>();
 
-const store = useStore();
-const sources = computed(() => store.state.sources);
+const obsStore = useObsStore();
+const sources = computed(() => obsStore.sources);
 
 const source = computed({
   get(): string { return props.component.source?.name ?? ''; },
   set(value: string) {
     const source = sources.value.find(source => source.name == value);
     if (!source) { return; }
-    store.commit(SOURCE_SET_SOURCE, source);
+    setSource(source);
   },
 });
 </script>
diff --git a/packages/renderer/src/components/Preview.vue b/packages/renderer/src/components/Preview.vue
@@ -15,16 +15,16 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from '/@/store/app';
+import { useLayoutStore } from '/@/store/layout';
 import { computed, ref, watch } from 'vue';
 import type { LayoutNode, Size } from '/@/layout';
 import { ContainerLayoutNode } from '/@/layout';
 import { usePreferredDark } from '@vueuse/core';
 
-const store = useStore();
+const store = useLayoutStore();
 const scale = ref(1);
 const canvas = ref<HTMLCanvasElement | null>(null);
-const node = computed(() => store.state.rootNode);
+const node = computed(() => store.rootNode);
 const prefersDarkMode = usePreferredDark();
 
 const didChangeSize = (newSize: Size) => {

diff --git a/packages/renderer/src/components/Sidebar.vue b/packages/renderer/src/components/Sidebar.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from '/@/store/app';
+import { useLayoutStore } from '/@/store/layout';
 import { computed } from 'vue';
 import TreeControl from './Sidebar/TreeControl.vue';
 
-const store = useStore();
-const component = computed(() => store.state.rootComponent);
+const store = useLayoutStore();
+const component = computed(() => store.rootComponent);
 </script>