Migrate Vuex store to Pinia

web/src/App.vue

@@ -23,19 +23,21 @@
 import { onMounted, ref } from 'vue';
 
 import { dandiRest } from '@/rest';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import AppBar from '@/components/AppBar/AppBar.vue';
 import DandiFooter from '@/components/DandiFooter.vue';
 import UserStatusBanner from '@/components/UserStatusBanner.vue';
 
+const store = useDandisetStore();
+
 const SERVER_DOWNTIME_MESSAGE = process.env.VUE_APP_SERVER_DOWNTIME_MESSAGE || 'Connection to server failed.';
 
 const verifiedServerConnection = ref(false);
 const connectedToServer = ref(true);
 
 onMounted(() => {
   Promise.all([
-    store.dispatch.dandiset.fetchSchema(),
+    store.fetchSchema(),
     dandiRest.restoreLogin(),
   ]).then(() => {
     connectedToServer.value = true;

web/src/components/DLP/DandisetOwnersDialog.vue

@@ -215,7 +215,7 @@
 import { debounce } from 'lodash';
 
 import { dandiRest } from '@/rest';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import {
   computed, defineComponent, Ref, ref, watch,
 } from 'vue';
@@ -230,8 +230,10 @@ export default defineComponent({
     },
   },
   setup(props, ctx) {
-    const currentDandiset = computed(() => store.state.dandiset.dandiset);
-    const owners = computed(() => store.state.dandiset.owners);
+    const store = useDandisetStore();
+
+    const currentDandiset = computed(() => store.dandiset);
+    const owners = computed(() => store.owners);
 
     const searchQuery = ref('');
     const newOwners: Ref<User[]> = ref([]);
@@ -269,7 +271,9 @@ export default defineComponent({
     const isSelected = (user: User) => selectedUsers.value.map(
       (u) => u.username,
     ).includes(user.username);
-    const setOwners = (ownersToSet: User[]) => store.commit.dandiset.setOwners(ownersToSet);
+    const setOwners = (ownersToSet: User[]) => {
+      store.owners = ownersToSet;
+    };
 
     /**
      * Add a user as an owner

web/src/components/Meditor/Meditor.vue

@@ -237,7 +237,7 @@ import '@koumoul/vjsf/lib/deps/third-party';
 import '@koumoul/vjsf/lib/VJsf.css';
 
 import { dandiRest } from '@/rest';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import { DandiModel, isJSONSchema } from './types';
 import { EditorInterface } from './editor';
 
@@ -271,11 +271,13 @@ export default defineComponent({
   name: 'Meditor',
   components: { VJsf, VJsfWrapper },
   setup() {
-    const currentDandiset = computed(() => store.state.dandiset.dandiset);
+    const store = useDandisetStore();
+
+    const currentDandiset = computed(() => store.dandiset);
     const id = computed(() => currentDandiset.value?.dandiset.identifier);
-    const schema: ComputedRef<JSONSchema7> = computed(() => store.state.dandiset.schema);
+    const schema: ComputedRef<JSONSchema7> = computed(() => store.schema);
     const model = computed(() => currentDandiset.value?.metadata);
-    const readonly = computed(() => !store.getters.dandiset.userCanModifyDandiset);
+    const readonly = computed(() => !store.userCanModifyDandiset);
     const isDataInLocalStorage = computed(
       () => (model.value ? dataInLocalStorage(model.value.id) : false),
     );
@@ -345,7 +347,7 @@ export default defineComponent({
           clearLocalStorage(model.value.id);
           // wait 0.5 seconds to give the celery worker some time to finish validation
           setTimeout(async () => {
-            await store.dispatch.dandiset.fetchDandiset({
+            await store.fetchDandiset({
               identifier: data.dandiset.identifier,
               version: data.version,
             });

web/src/rest.ts

@@ -1,10 +1,13 @@
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
 import Vue from 'vue';
+import { mapState } from 'pinia';
 import OAuthClient from '@girder/oauth-client';
 import {
   Asset, Dandiset, Paginated, User, Version, Info, AssetFile, AssetFolder,
 } from '@/types';
 import { Dandiset as DandisetMetadata, DandisetContributors, Organization } from '@/types/schema';
+// eslint-disable-next-line import/no-cycle
+import { useDandisetStore } from '@/stores/dandiset';
 
 if (!process.env.VUE_APP_DANDI_API_ROOT) {
   throw new Error('Environment variable "VUE_APP_DANDI_API_ROOT" must be set.');
@@ -37,11 +40,7 @@ const dandiRest = new Vue({
     };
   },
   computed: {
-    schemaVersion(): string {
-      // Use injected $store instead of importing to
-      // avoid dependency cycle
-      return this.$store?.direct.getters.dandiset.schemaVersion;
-    },
+    ...mapState(useDandisetStore, ['schemaVersion']),
   },
   methods: {
     async restoreLogin() {

web/src/views/CreateDandisetView/CreateDandisetView.vue

@@ -112,7 +112,7 @@ import { computed, ComputedRef, ref } from 'vue';
 import { dandiRest, loggedIn } from '@/rest';
 import { IdentifierForAnAward, LicenseType, License } from '@/types';
 
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import { useRouter } from 'vue-router/composables';
 
 // Regular expression to validate an NIH award number.
@@ -127,6 +127,7 @@ function awardNumberValidator(awardNumber: IdentifierForAnAward): boolean {
 const VALIDATION_FAIL_MESSAGE = 'Award number must be properly space-delimited.\n\nExample (exclude quotes):\n"1 R01 CA 123456-01A1"';
 
 const router = useRouter();
+const store = useDandisetStore();
 
 const name = ref('');
 const description = ref('');
@@ -145,7 +146,7 @@ const awardNumberRules = computed(
 );
 
 const dandiLicenses: ComputedRef<LicenseType[]> = computed(
-  () => store.state.dandiset.schema.definitions.LicenseType.enum,
+  () => store.schema.definitions.LicenseType.enum,
 );
 
 if (!loggedIn()) {

web/src/views/DandisetLandingView/CiteAsDialog.vue

@@ -23,7 +23,9 @@
 <script setup lang="ts">
 import CopyText from '@/components/CopyText.vue';
 import { computed } from 'vue';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 
-const citation = computed(() => store.state.dandiset.dandiset?.metadata?.citation);
+const store = useDandisetStore();
+
+const citation = computed(() => store.dandiset?.metadata?.citation);
 </script>

web/src/views/DandisetLandingView/DandisetActions.vue

@@ -143,15 +143,17 @@ import { computed, ComputedRef } from 'vue';
 import { Location } from 'vue-router';
 
 import { dandiRest } from '@/rest';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 
 import { open as openMeditor } from '@/components/Meditor/state';
 import DownloadDialog from './DownloadDialog.vue';
 import CiteAsDialog from './CiteAsDialog.vue';
 import ShareDialog from './ShareDialog.vue';
 
-const currentDandiset = computed(() => store.state.dandiset.dandiset);
-const currentVersion = computed(() => store.getters.dandiset.version);
+const store = useDandisetStore();
+
+const currentDandiset = computed(() => store.dandiset);
+const currentVersion = computed(() => store.version);
 
 const fileBrowserLink: ComputedRef<Location|null> = computed(() => {
   if (!currentDandiset.value) {

web/src/views/DandisetLandingView/DandisetLandingView.vue

@@ -53,7 +53,7 @@ import { NavigationGuardNext, RawLocation, Route } from 'vue-router';
 
 import DandisetSearchField from '@/components/DandisetSearchField.vue';
 import Meditor from '@/components/Meditor/Meditor.vue';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import { Version } from '@/types';
 import { draftVersion, sortingOptions } from '@/utils/constants';
 import { editorInterface } from '@/components/Meditor/state';
@@ -98,11 +98,12 @@ export default defineComponent({
   setup(props) {
     const route = useRoute();
     const router = useRouter();
+    const store = useDandisetStore();
 
-    const currentDandiset = computed(() => store.state.dandiset.dandiset);
-    const loading = computed(() => store.state.dandiset.loading);
-    const schema = computed(() => store.state.dandiset.schema);
-    const userCanModifyDandiset = computed(() => store.getters.dandiset.userCanModifyDandiset);
+    const currentDandiset = computed(() => store.dandiset);
+    const loading = computed(() => store.loading);
+    const schema = computed(() => store.schema);
+    const userCanModifyDandiset = computed(() => store.userCanModifyDandiset);
 
     const meta = computed(() => (currentDandiset.value ? currentDandiset.value.metadata : {}));
 
@@ -124,22 +125,22 @@ export default defineComponent({
     watch(() => props.identifier, async () => {
       const { identifier, version } = props;
       if (identifier) {
-        await store.dispatch.dandiset.initializeDandisets({ identifier, version });
+        await store.initializeDandisets({ identifier, version });
       }
     }, { immediate: true });
 
     watch([() => props.identifier, () => props.version], async () => {
       const { identifier, version } = props;
       if (version) {
       // On version change, fetch the new dandiset (not initial)
-        await store.dispatch.dandiset.fetchDandiset({ identifier, version });
+        await store.fetchDandiset({ identifier, version });
       } else {
-        await store.dispatch.dandiset.fetchDandiset({ identifier });
+        await store.fetchDandiset({ identifier });
       }
       // If the above await call didn't result in dandiset being set, navigate to a default
       if (!currentDandiset.value) {
         // Omitting version will fetch the most recent version instead
-        await store.dispatch.dandiset.fetchDandiset({ identifier });
+        await store.fetchDandiset({ identifier });
 
         if (currentDandiset.value) {
           navigateToVersion((currentDandiset.value as Version).version);

web/src/views/DandisetLandingView/DandisetMain.vue

@@ -209,7 +209,7 @@ import {
 import filesize from 'filesize';
 import moment from 'moment';
 
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import { AccessInformation, DandisetStats, SubjectMatterOfTheDataset } from '@/types';
 
 import AccessInformationTab from '@/components/DLP/AccessInformationTab.vue';
@@ -273,7 +273,9 @@ export default defineComponent({
     },
   },
   setup() {
-    const currentDandiset = computed(() => store.state.dandiset.dandiset);
+    const store = useDandisetStore();
+
+    const currentDandiset = computed(() => store.dandiset);
 
     const transformFilesize = (size: number) => filesize(size, { round: 1, base: 10, standard: 'iec' });
 

web/src/views/DandisetLandingView/DandisetOwners.vue

@@ -95,12 +95,14 @@
 
 <script setup lang="ts">
 import { dandiRest, loggedIn } from '@/rest';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import DandisetOwnersDialog from '@/components/DLP/DandisetOwnersDialog.vue';
 import { computed, ref } from 'vue';
 
+const store = useDandisetStore();
+
 const ownerDialog = ref(false);
-const owners = computed(() => store.state.dandiset.owners);
+const owners = computed(() => store.owners);
 
 const manageOwnersDisabled = computed(() => {
   if (dandiRest.user?.admin) {

web/src/views/DandisetLandingView/DandisetPublish.vue

@@ -375,7 +375,7 @@
         {{ formatDate(currentDandiset.modified) }}
       </v-col>
       <v-col>
-        <h3>{{ currentVersion.toUpperCase() }}</h3>
+        <h3>{{ currentVersion?.toUpperCase() }}</h3>
       </v-col>
     </v-row>
     <v-row>
@@ -416,7 +416,7 @@ import {
 import moment from 'moment';
 
 import { dandiRest, loggedIn as loggedInFunc, user as userFunc } from '@/rest';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import router from '@/router';
 import { User, Version } from '@/types';
 
@@ -465,12 +465,13 @@ export default defineComponent({
   },
   setup(props) {
     const route = useRoute();
+    const store = useDandisetStore();
 
-    const currentDandiset = computed(() => store.state.dandiset.dandiset);
-    const currentVersion = computed(() => store.getters.dandiset.version);
+    const currentDandiset = computed(() => store.dandiset);
+    const currentVersion = computed(() => store.dandiset?.version);
 
     const otherVersions: ComputedRef<Version[]|undefined> = computed(
-      () => store.state.dandiset.versions?.filter(
+      () => store.versions?.filter(
         (version: Version) => version.version !== currentVersion.value,
       ).sort(sortVersions),
     );
@@ -479,7 +480,7 @@ export default defineComponent({
     const loggedIn: ComputedRef<boolean> = computed(loggedInFunc);
 
     const isOwner: ComputedRef<boolean> = computed(
-      () => !!(store.state.dandiset.owners?.find(
+      () => !!(store.owners?.find(
         (owner: User) => owner.username === user.value?.username,
       )),
     );
@@ -520,7 +521,7 @@ export default defineComponent({
     ));
 
     const publishButtonHidden: ComputedRef<boolean> = computed(() => {
-      if (!store.state.dandiset.owners) {
+      if (!store.owners) {
         return true;
       }
       // always show the publish button to admins
@@ -548,6 +549,12 @@ export default defineComponent({
     function setVersion({ version: newVersion }: any) {
       const version = newVersion || draftVersion;
 
+      const identifier = currentDandiset.value?.dandiset.identifier;
+
+      if (!identifier) {
+        return;
+      }
+
       if (route.params.version !== version) {
         router.replace({
           ...route,
@@ -557,7 +564,7 @@ export default defineComponent({
           },
         } as RawLocation);
 
-        store.dispatch.dandiset.fetchDandiset({
+        store.fetchDandiset({
           identifier: currentDandiset.value?.dandiset.identifier,
           version: newVersion,
         });

web/src/views/DandisetLandingView/DandisetSidebar.vue

@@ -21,7 +21,7 @@ import {
   defineComponent, computed,
 } from 'vue';
 
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 import { Version } from '@/types';
 
 import DandisetActions from './DandisetActions.vue';
@@ -44,10 +44,12 @@ export default defineComponent({
     },
   },
   setup() {
-    const currentDandiset = computed(() => store.state.dandiset.dandiset);
-    const currentVersion = computed(() => store.getters.dandiset.version);
+    const store = useDandisetStore();
 
-    const otherVersions = computed(() => store.state.dandiset.versions?.filter(
+    const currentDandiset = computed(() => store.dandiset);
+    const currentVersion = computed(() => store.version);
+
+    const otherVersions = computed(() => store.versions?.filter(
       (version: Version) => version.version !== currentVersion.value,
     ));
 

web/src/views/DandisetLandingView/DandisetUnembargo.vue

@@ -117,13 +117,15 @@
 import { computed, ref } from 'vue';
 import moment from 'moment';
 import { dandiRest } from '@/rest';
-import store from '@/store';
+import { useDandisetStore } from '@/stores/dandiset';
 
 function formatDate(date: string): string {
   return moment(date).format('ll');
 }
 
-const currentDandiset = computed(() => store.state.dandiset.dandiset);
+const store = useDandisetStore();
+
+const currentDandiset = computed(() => store.dandiset);
 const unembargoing = computed(() => currentDandiset.value?.dandiset.embargo_status === 'UNEMBARGOING');
 const showWarningDialog = ref(false);
 const confirmationPhrase = ref('');
@@ -139,7 +141,7 @@ async function unembargo() {
     await dandiRest.unembargo(currentDandiset.value.dandiset.identifier);
 
     // re-fetch the dandiset to refresh the embargo_status
-    store.dispatch.dandiset.fetchDandiset({
+    store.fetchDandiset({
       identifier: currentDandiset.value.dandiset.identifier,
       version: currentDandiset.value.version,
     });