Migrate to use Pinia over Vuex

package.json

@@ -8,6 +8,7 @@
     "serve": "vite --host 0.0.0.0 --port 8080",
     "build": "vite build",
     "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --no-fix src",
+    "lint:file": "eslint --ext .ts,.vue --ignore-path .gitignore --no-fix",
     "lint:fix": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
@@ -26,15 +27,14 @@
     "d3-scale": "^3.2.3",
     "d3-scale-chromatic": "^2.0.0",
     "d3-selection": "^2.0.0",
-    "direct-vuex": "^0.12.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "multinet": "^0.21.4",
-    "multinet-components": "^0.0.1",
+    "multinet-components": "^0.0.2",
+    "pinia": "^2.0.28",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.0.1",
     "vue": "^2.7.0",
     "vuetify": "^2.6.10",
-    "vuex": "^3.5.1",
     "yorkie": "^2.0.0"
   },
   "devDependencies": {
@@ -62,10 +62,10 @@
   },
   "lint-staged": {
     "*.ts": [
-      "yarn lint"
+      "yarn lint:file"
     ],
     "*.vue": [
-      "yarn lint"
+      "yarn lint:file"
     ]
   }
 }

src/App.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import store from '@/store';
+import 'multinet-components/dist/style.css';
+import { storeToRefs } from 'pinia';
+import { useStore } from '@/store';
 import { getUrlVars } from '@/lib/utils';
 
 import AlertBanner from '@/components/AlertBanner.vue';
 import ControlPanel from '@/components/ControlPanel.vue';
 import MultiLink from '@/components/MultiLink.vue';
 import ProvVis from '@/components/ProvVis.vue';
 
-import 'multinet-components/dist/style.css';
+const store = useStore();
+const {
+  network,
+  loadError,
+  showProvenanceVis,
+} = storeToRefs(store);
 
 const urlVars = getUrlVars(); // Takes workspace and network
-store.dispatch.fetchNetwork({
-  workspaceName: urlVars.workspace,
-  networkName: urlVars.network,
-}).then(() => {
-  store.dispatch.createProvenance();
-  store.dispatch.guessLabel();
+store.fetchNetwork(
+  urlVars.workspace,
+  urlVars.network,
+).then(() => {
+  store.createProvenance();
+  store.guessLabel();
 });
 </script>
 
@@ -24,14 +31,12 @@ store.dispatch.fetchNetwork({
     <v-main>
       <control-panel />
 
-      <multi-link
-        v-if="store.state.network !== null && store.state.selectedNodes !== null"
-      />
+      <multi-link v-if="network !== null" />
 
-      <alert-banner v-if="store.state.loadError.message !== ''" />
+      <alert-banner v-if="loadError.message !== ''" />
     </v-main>
 
-    <prov-vis v-if="store.state.showProvenanceVis" />
+    <prov-vis v-if="showProvenanceVis" />
   </v-app>
 </template>
 

src/components/AlertBanner.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import {
-  computed, Ref, ref, watchEffect,
-} from 'vue';
-import store from '@/store';
+import { ref, watchEffect } from 'vue';
+import { useStore } from '@/store';
 import api from '@/api';
+import { storeToRefs } from 'pinia';
 
-const loadError = computed(() => store.state.loadError);
+const store = useStore();
+const { loadError } = storeToRefs(store);
 
 // Vars to store the selected choices in
-const workspace: Ref<string | null> = ref(null);
-const network: Ref<string | null> = ref(null);
+const workspace = ref<string | null>(null);
+const network = ref<string | null>(null);
 
 // Compute the workspace/network options
-const workspaceOptions: Ref<string[]> = ref([]);
+const workspaceOptions = ref<string[]>([]);
 watchEffect(async () => {
   workspaceOptions.value = (await api.workspaces()).results.map((workspaceObj) => workspaceObj.name);
 });
 
-const networkOptions: Ref<string[]> = ref([]);
+const networkOptions = ref<string[]>([]);
 watchEffect(async () => {
   if (workspace.value !== null) {
     networkOptions.value = (await api.networks(workspace.value)).results.map((networkObj) => networkObj.name);

src/components/ContextMenu.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import store from '@/store';
+import { useStore } from '@/store';
+import { storeToRefs } from 'pinia';
 
-const network = computed(() => store.state.network);
-const selectedNodes = computed(() => store.state.selectedNodes);
+const store = useStore();
+const {
+  network,
+  selectedNodes,
+  rightClickMenu,
+} = storeToRefs(store);
 
 function pinSelectedNodes() {
   if (network.value !== null) {
     network.value.nodes
-      .filter((node) => selectedNodes.value.has(node._id))
+      .filter((node) => selectedNodes.value.includes(node._id))
       .forEach((node) => {
         node.fx = node.x;
         node.fy = node.y;
@@ -18,15 +22,13 @@ function pinSelectedNodes() {
 function unPinSelectedNodes() {
   if (network.value !== null) {
     network.value.nodes
-      .filter((node) => selectedNodes.value.has(node._id))
+      .filter((node) => selectedNodes.value.includes(node._id))
       .forEach((node) => {
         delete node.fx;
         delete node.fy;
       });
   }
 }
-
-const rightClickMenu = computed(() => store.state.rightClickMenu);
 </script>
 
 <template>
@@ -41,7 +43,7 @@ const rightClickMenu = computed(() => store.state.rightClickMenu);
       <v-list>
         <v-list-item
           dense
-          @click="store.commit.setSelected(new Set())"
+          @click="store.selectedNodes = []"
         >
           <v-list-item-content>
             <v-list-item-title>Clear Selection</v-list-item-title>

src/components/ControlPanel.vue

@@ -1,17 +1,34 @@
 <script setup lang="ts">
 import { LoginMenu } from 'multinet-components';
-import { computed, Ref, ref } from 'vue';
+import { computed, ref } from 'vue';
 import LegendPanel from '@/components/LegendPanel.vue';
 import AboutDialog from '@/components/AboutDialog.vue';
 
-import store from '@/store';
+import { useStore } from '@/store';
 import { internalFieldNames } from '@/types';
 import oauthClient from '@/oauth';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const {
+  displayCharts,
+  layoutVars,
+  fontSize,
+  labelVariable,
+  selectNeighbors,
+  directionalEdges,
+  edgeLength,
+  controlsWidth,
+  simulationRunning,
+  columnTypes,
+  network,
+  selectedNodes,
+  userInfo,
+} = storeToRefs(store);
 
 const searchTerm = ref('');
-const searchErrors: Ref<string[]> = ref([]);
+const searchErrors = ref<string[]>([]);
 const showMenu = ref(false);
-const network = computed(() => store.state.network);
 
 const multiVariableList = computed(() => {
   if (network.value !== null) {
@@ -30,73 +47,14 @@ const multiVariableList = computed(() => {
   return new Set();
 });
 
-const displayCharts = computed({
-  get() {
-    return store.state.displayCharts;
-  },
-  set(value: boolean) {
-    return store.commit.setDisplayCharts(value);
-  },
-});
-
-const layoutVars = computed(() => store.state.layoutVars);
 const markerSize = computed({
   get() {
-    return store.state.markerSize || 0;
-  },
-  set(value: number) {
-    store.commit.setMarkerSize({ markerSize: value, updateProv: false });
-  },
-});
-
-const fontSize = computed({
-  get() {
-    return store.state.fontSize || 0;
-  },
-  set(value: number) {
-    store.commit.setFontSize({ fontSize: value, updateProv: false });
-  },
-});
-
-const labelVariable = computed({
-  get() {
-    return store.state.labelVariable;
-  },
-  set(value: string | undefined) {
-    store.commit.setLabelVariable(value);
-  },
-});
-
-const selectNeighbors = computed({
-  get() {
-    return store.state.selectNeighbors;
-  },
-  set(value: boolean) {
-    store.commit.setSelectNeighbors(value);
-  },
-});
-
-const directionalEdges = computed({
-  get() {
-    return store.state.directionalEdges;
-  },
-  set(value: boolean) {
-    store.commit.setDirectionalEdges(value);
-  },
-});
-
-const edgeLength = computed({
-  get() {
-    return store.state.edgeLength;
+    return store.markerSize || 0;
   },
   set(value: number) {
-    store.commit.setEdgeLength({ edgeLength: value, updateProv: false });
+    store.setMarkerSize({ markerSize: value, updateProv: false });
   },
 });
-
-const controlsWidth = computed(() => store.state.controlsWidth);
-const simulationRunning = computed(() => store.state.simulationRunning);
-const columnTypes = computed(() => store.state.columnTypes);
 const autocompleteItems = computed(() => {
   if (network.value !== null && labelVariable.value !== undefined) {
     return network.value.nodes.map((node) => (node[labelVariable.value || '']));
@@ -130,7 +88,7 @@ function exportNetwork() {
       type: 'text/json',
     }),
   );
-  a.download = `${store.state.networkName}.json`;
+  a.download = `${store.networkName}.json`;
   a.click();
 }
 
@@ -142,7 +100,7 @@ function search() {
       .map((node) => node._id);
 
     if (nodeIDsToSelect.length > 0) {
-      store.commit.addSelectedNode(nodeIDsToSelect);
+      selectedNodes.value.push(...nodeIDsToSelect);
     } else {
       searchErrors.value.push('Enter a valid node to search');
     }
@@ -151,15 +109,13 @@ function search() {
 
 function updateSliderProv(value: number, type: 'markerSize' | 'fontSize' | 'edgeLength') {
   if (type === 'markerSize') {
-    store.commit.setMarkerSize({ markerSize: value, updateProv: true });
+    store.setMarkerSize({ markerSize: value, updateProv: true });
   } else if (type === 'fontSize') {
-    store.commit.setFontSize({ fontSize: value, updateProv: true });
+    fontSize.value = value;
   } else if (type === 'edgeLength') {
-    store.commit.setEdgeLength({ edgeLength: value, updateProv: true });
+    store.setEdgeLength({ edgeLength: value, updateProv: true });
   }
 }
-
-const userInfo = computed(() => store.state.userInfo);
 </script>
 
 <template>
@@ -199,9 +155,10 @@ const userInfo = computed(() => store.state.userInfo);
         </v-toolbar-title>
         <v-spacer />
         <login-menu
-          :store="store"
-          :oauth-client="oauthClient"
           :user-info="userInfo"
+          :oauth-client="oauthClient"
+          :logout="store.logout"
+          :fetch-user-info="store.fetchUserInfo"
         />
       </v-toolbar>
 
@@ -324,7 +281,7 @@ const userInfo = computed(() => store.state.userInfo);
                 color="grey darken-2"
                 depressed
                 small
-                @click="store.dispatch.releaseNodes()"
+                @click="store.releaseNodes()"
               >
                 <v-icon
                   left
@@ -342,7 +299,7 @@ const userInfo = computed(() => store.state.userInfo);
                 depressed
                 small
                 width="75"
-                @click="simulationRunning ? store.commit.stopSimulation() : store.commit.startSimulation()"
+                @click="simulationRunning ? store.stopSimulation() : store.startSimulation()"
               >
                 <v-icon
                   left
@@ -360,7 +317,7 @@ const userInfo = computed(() => store.state.userInfo);
               color="primary"
               block
               depressed
-              @click="store.commit.toggleShowProvenanceVis()"
+              @click="store.showProvenanceVis = true"
             >
               Provenance Vis
             </v-btn>