From 497727533e6a997381bd3dfff9dc913ae32a5b57 Mon Sep 17 00:00:00 2001 From: Lukas Hirt Date: Fri, 11 Jun 2021 13:52:46 +0200 Subject: [PATCH] fix: do not call vuex create store multiple times --- changelog/unreleased/bugfix-remove-vuex-circular-init | 5 +++++ packages/web-app-files/src/views/LocationPicker.vue | 2 +- packages/web-runtime/src/index.js | 8 +++++++- packages/web-runtime/src/plugins/mediaSource.js | 3 +-- packages/web-runtime/src/router/index.js | 3 +-- packages/web-runtime/src/store/index.js | 11 ++--------- packages/web-runtime/tests/store/config.spec.js | 10 +++++++++- 7 files changed, 26 insertions(+), 16 deletions(-) create mode 100644 changelog/unreleased/bugfix-remove-vuex-circular-init diff --git a/changelog/unreleased/bugfix-remove-vuex-circular-init b/changelog/unreleased/bugfix-remove-vuex-circular-init new file mode 100644 index 00000000000..21282deb957 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue index 3dcdb9c51dc..4896081cfe4 100644 --- a/packages/web-app-files/src/views/LocationPicker.vue +++ b/packages/web-app-files/src/views/LocationPicker.vue @@ -124,7 +124,7 @@ export default { 'activeFilesCount', 'filesTotalSize' ]), - ...mapGetters('configuration'), + ...mapGetters(['configuration']), title() { const translated = diff --git a/packages/web-runtime/src/index.js b/packages/web-runtime/src/index.js index c7bb63c25ac..5120effde89 100644 --- a/packages/web-runtime/src/index.js +++ b/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 diff --git a/packages/web-runtime/src/plugins/mediaSource.js b/packages/web-runtime/src/plugins/mediaSource.js index 36dbb550e9e..aefc4a41acf 100644 --- a/packages/web-runtime/src/plugins/mediaSource.js +++ b/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') diff --git a/packages/web-runtime/src/router/index.js b/packages/web-runtime/src/router/index.js index 3f123f84fa3..7552149d98a 100644 --- a/packages/web-runtime/src/router/index.js +++ b/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) { diff --git a/packages/web-runtime/src/store/index.js b/packages/web-runtime/src/store/index.js index 830ad7daa06..b4fb7c1ee5b 100644 --- a/packages/web-runtime/src/store/index.js +++ b/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 +} diff --git a/packages/web-runtime/tests/store/config.spec.js b/packages/web-runtime/tests/store/config.spec.js index f7aa041b064..23dbafa698c 100644 --- a/packages/web-runtime/tests/store/config.spec.js +++ b/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 }