Update store to v4

client/src/components/content-block-form/EditContentBlockWizard.vue

@@ -1,11 +1,16 @@
 <template>
-  <contents-form :content-block="contentBlock" :show-task-selection="true" @save="saveContentBlock" @hide="hideModal" />
+  <contents-form
+    :content-block="contentBlock"
+    :show-task-selection="true"
+    @save="saveContentBlock"
+    @hide="hideModal"
+  />
 </template>
 
 <script>
   import ContentsForm from '@/components/content-block-form/ContentsForm';
 
-import store from '@/store/index';
+  import {store} from '@/store';
 
   import EDIT_CONTENT_BLOCK_MUTATION from 'gql/mutations/editContentBlock.gql';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
@@ -33,29 +38,25 @@ export default {
         this.$store.dispatch('hideModal');
       },
       saveContentBlock(contentBlock) {
-      this.$apollo
-        .mutate({
+        this.$apollo.mutate({
           mutation: EDIT_CONTENT_BLOCK_MUTATION,
           variables: {
             input: {
               contentBlock: {
                 title: contentBlock.title,
-                contents: contentBlock.contents.filter((value) => Object.keys(value).length > 0),
+                contents: contentBlock.contents.filter(value => Object.keys(value).length > 0),
                 type: setUserBlockType(contentBlock.isAssignment),
               },
               id: contentBlock.id,
             },
           },
-          refetchQueries: [
-            {
+          refetchQueries: [{
             query: MODULE_DETAILS_QUERY,
             variables: {
               slug: this.$route.params.slug,
             },
-            },
-          ],
-        })
-        .then(() => {
+          }],
+        }).then(() => {
           this.hideModal();
         });
       },
@@ -71,5 +72,6 @@ export default {
         };
       },
     },
+
   };
 </script>

client/src/main.js

@@ -1,10 +1,10 @@
 import '@babel/polyfill';
-import {createApp} from 'vue';
+import {createApp, configureCompat } from 'vue';
 import VueVimeoPlayer from 'vue-vimeo-player';
 import apolloClientFactory from './graphql/client';
 import App from './App.vue';
 import {postLoginRedirectUrlKey, router} from './router';
-import store from '@/store/index';
+import { store } from '@/store';
 import VueScrollTo from 'vue-scrollto';
 import autoGrow from '@/directives/auto-grow';
 import clickOutside from '@/directives/click-outside';
@@ -27,13 +27,13 @@ const apolloProvider = createApolloProvider({
   defaultClient: privateApolloClient,
 });
 
-const app = createApp({
-  store,
-  router,
-  apolloProvider,
-  render: h => h(App),
+configureCompat({
+  MODE: 2
 });
 
+const app = createApp(App);
+
+app.use(store);
 
 const isProduction = process.env.NODE_ENV === 'production';
 

client/src/router/index.js

@@ -7,7 +7,7 @@ import meRoutes from './me.routes';
 import authRoutes from './auth.routes';
 import roomRoutes from './room.routes';
 
-import store from '@/store/index';
+import {store} from '@/store';
 import {LAYOUT_SIMPLE} from '@/router/core.constants';
 import {EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE} from './oauth.names';
 

client/src/store/index.js

@@ -1,10 +1,8 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-
-Vue.use(Vuex);
+import {createStore} from 'vuex';
 
 // WARNING fixme todo: please do not use this anymore, use the local GraphQL cache
-export default new Vuex.Store({
+// export default new Vuex.Store({
+export const store = createStore({
   modules: {},
 
   state: {