fix: do not call vuex create store multiple times

changelog/unreleased/bugfix-remove-vuex-circular-init

@@ -0,0 +1,5 @@
+Bugfix: Do not call Vuex create store multiple times
+
+We've moved the create Vuex store logic into the index file of Web runtime to prevent initialising the store multiple times.
+
+https://github.com/owncloud/web/pull/5254

packages/web-app-files/src/views/LocationPicker.vue

@@ -124,7 +124,7 @@ export default {
       'activeFilesCount',
       'filesTotalSize'
     ]),
-    ...mapGetters('configuration'),
+    ...mapGetters(['configuration']),
 
     title() {
       const translated =

packages/web-runtime/src/index.js

@@ -3,6 +3,8 @@ import 'vue-resize/dist/vue-resize.css'
 
 // --- Libraries and Plugins ---
 import Vue from './vue'
+import Vuex from 'vuex'
+import { createStore } from 'vuex-extensions'
 
 // --- Components ---
 import App from './App.vue'
@@ -12,7 +14,7 @@ import missingOrInvalidConfigPage from './pages/missingOrInvalidConfig.vue'
 import OwnCloud from 'owncloud-sdk'
 
 import { sync } from 'vuex-router-sync'
-import store from './store'
+import Store from './store'
 import router from './router'
 
 // --- Plugins ----
@@ -64,6 +66,7 @@ wgxpath.install()
 Vue.prototype.$client = new OwnCloud()
 
 Vue.use(VueEvents)
+Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueScrollTo)
 Vue.use(MediaSource)
@@ -92,6 +95,9 @@ if (process.env.NODE_ENV === 'development') {
   })
 }
 
+/* --- Store --- */
+const store = createStore(Vuex.Store, { ...Store })
+
 // --- Router ----
 
 let config

packages/web-runtime/src/plugins/mediaSource.js

@@ -1,4 +1,3 @@
-import store from '../store'
 import PQueue from 'p-queue'
 
 export default {
@@ -7,7 +6,7 @@ export default {
       return new Promise((resolve, reject) => {
         if (headers === null) {
           headers = new Headers()
-          headers.append('Authorization', 'Bearer ' + store.getters.getToken)
+          headers.append('Authorization', 'Bearer ' + Vue.$store.getters.getToken)
         }
         headers.append('X-Requested-With', 'XMLHttpRequest')
 

packages/web-runtime/src/router/index.js

@@ -5,8 +5,6 @@ import OidcCallbackPage from '../pages/oidcCallback.vue'
 import AccessDeniedPage from '../pages/accessDenied.vue'
 import Account from '../pages/account.vue'
 
-import store from '../store'
-
 Vue.use(Router)
 
 // just a dummy function to trick gettext tools
@@ -71,6 +69,7 @@ const router = new Router({
 })
 
 router.beforeEach(function(to, from, next) {
+  const store = Vue.$store
   const isAuthenticated = store.getters.isAuthenticated
   let authRequired = true
   if (to.meta.auth === false) {

packages/web-runtime/src/store/index.js

@@ -1,7 +1,4 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
-import { createStore } from 'vuex-extensions'
 
 /* STORE MODULES
  */
@@ -15,8 +12,6 @@ import modal from './modal'
 import navigation from './navigation'
 import sidebar from './sidebar'
 
-Vue.use(Vuex)
-
 const vuexPersistInSession = new VuexPersistence({
   key: 'webStateInSessionStorage',
   // Browser tab independent storage which gets deleted after the tab is closed
@@ -32,7 +27,7 @@ const vuexPersistInSession = new VuexPersistence({
 
 const strict = process.env.NODE_ENV === 'development'
 
-export const Store = createStore(Vuex.Store, {
+export default {
   plugins: [vuexPersistInSession.plugin],
   modules: {
     app,
@@ -46,6 +41,4 @@ export const Store = createStore(Vuex.Store, {
     sidebar
   },
   strict
-})
-
-export default Store
+}

packages/web-runtime/tests/store/config.spec.js

@@ -1,9 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { createStore } from 'vuex-extensions'
+
 import { loadTheme } from 'web-runtime/src/helpers/theme'
-import store from 'web-runtime/src/store'
+import Store from 'web-runtime/src/store'
 import { keysDeep } from 'web-pkg/src/utils/object'
 import get from 'lodash-es/get'
 import difference from 'lodash-es/difference'
 
+Vue.use(Vuex)
+
+const store = createStore(Vuex.Store, { ...Store })
+
 describe('config theme bootstrap', () => {
   const initialStoreTheme = { ...store.getters.configuration.theme }