Migrate Vuex store to Pinia

web/package.json

@@ -18,19 +18,17 @@
     "ajv": "^8.3.0",
     "axios": "^0.21.2",
     "core-js": "^3.12.1",
-    "direct-vuex": "^0.12.1",
     "filesize": "^6.3.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
+    "pinia": "^2.0.22",
     "vue": "^2.7.10",
     "vue-cookie-law": "^1.13.3",
     "vue-gtag": "^1.16.1",
     "vue-router": "^3.6.4",
     "vue-social-sharing": "^3.0.8",
-    "vuetify": "~2.3.6",
-    "vuex": "^3.6.2",
-    "vuex-router-sync": "^5.0.0"
+    "vuetify": "~2.3.6"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.1",

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/main.ts

@@ -1,6 +1,5 @@
 // Import external packages
-import Vue, { provide } from 'vue';
-import { sync } from 'vuex-router-sync';
+import Vue from 'vue';
 import VueGtag from 'vue-gtag';
 import VueSocialSharing from 'vue-social-sharing';
 
@@ -9,6 +8,7 @@ import * as Sentry from '@sentry/browser';
 import * as Integrations from '@sentry/integrations';
 
 // Import plugins first (order may matter)
+import pinia from '@/plugins/pinia';
 import vuetify from '@/plugins/vuetify';
 
 // Import custom behavior
@@ -17,28 +17,22 @@ import '@/title';
 // Import internal items
 import App from '@/App.vue';
 import router from '@/router';
-import store from '@/store';
 
 Sentry.init({
   dsn: process.env.VUE_APP_SENTRY_DSN,
   environment: process.env.VUE_APP_SENTRY_ENVIRONMENT,
   integrations: [new Integrations.Vue({ Vue, logErrors: true })],
 });
 
-sync(store.original, router);
-
 Vue.use(VueGtag, {
   config: { id: 'UA-146135810-2' },
 }, router);
 
 Vue.use(VueSocialSharing);
 
 new Vue({
-  setup() {
-    provide('store', store);
-  },
   router,
   render: (h) => h(App),
-  store: store.original,
+  pinia,
   vuetify,
 }).$mount('#app');

web/src/plugins/pinia.ts

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import { createPinia, PiniaVuePlugin } from 'pinia';
+
+Vue.use(PiniaVuePlugin);
+
+export default createPinia();

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() {