Update store to v4

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

@@ -1,75 +1,77 @@
 <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 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 EDIT_CONTENT_BLOCK_MUTATION from 'gql/mutations/editContentBlock.gql';
-import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
+  import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
-import { setUserBlockType } from '@/helpers/content-block';
+  import {setUserBlockType} from '@/helpers/content-block';
 
-export default {
+  export default {
-  components: {
+    components: {
-    ContentsForm,
+      ContentsForm,
-  },
-
-  data() {
-    return {
-      contentBlock: {},
-    };
-  },
-
-  created() {
-    // debugger;
-  },
-
-  methods: {
-    hideModal() {
-      this.$store.dispatch('resetCurrentNoteBlock');
-      this.$store.dispatch('hideModal');
     },
-    saveContentBlock(contentBlock) {
+
-      this.$apollo
+    data() {
-        .mutate({
+      return {
+        contentBlock: {},
+      };
+    },
+
+    created() {
+      // debugger;
+    },
+
+    methods: {
+      hideModal() {
+        this.$store.dispatch('resetCurrentNoteBlock');
+        this.$store.dispatch('hideModal');
+      },
+      saveContentBlock(contentBlock) {
+        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,
-              query: MODULE_DETAILS_QUERY,
+            variables: {
-              variables: {
+              slug: this.$route.params.slug,
-                slug: this.$route.params.slug,
-              },
             },
-          ],
+          }],
-        })
+        }).then(() => {
-        .then(() => {
           this.hideModal();
         });
+      },
     },
-  },
 
-  apollo: {
+    apollo: {
-    contentBlock() {
+      contentBlock() {
-      return {
+        return {
-        query: CONTENT_BLOCK_QUERY,
+          query: CONTENT_BLOCK_QUERY,
-        variables: {
+          variables: {
-          id: store.state.currentNoteBlock,
+            id: store.state.currentNoteBlock,
-        },
+          },
-      };
+        };
+      },
     },
-  },
+
-};
+  };
 </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 {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({
+configureCompat({
-  store,
+  MODE: 2
-  router,
-  apolloProvider,
-  render: h => h(App),
 });
 
+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 {createStore} from 'vuex';
-import Vuex from 'vuex';
-
-Vue.use(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: {