load config at init

ffplayout/frontend/nuxt.config.js

@@ -44,6 +44,7 @@ export default {
     plugins: [
         { src: '~/plugins/axios' },
         { src: '~/plugins/filters' },
+        { src: '~/plugins/nuxt-client-init.js', ssr: false },
         { src: '~plugins/video.js', ssr: false },
         { src: '~plugins/scrollbar.js', ssr: false },
         { src: '~plugins/splitpanes.js', ssr: false },

ffplayout/frontend/pages/configure.vue

@@ -213,6 +213,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import Menu from '@/components/Menu.vue'
 
 export default {
@@ -223,18 +224,8 @@ export default {
         Menu
     },
 
-    async asyncData ({ app, store }) {
+    data () {
-        if (store.state.auth.isLogin) {
-            await store.dispatch('config/getGuiConfig')
-            await store.dispatch('config/getPlayoutConfig')
-            await store.dispatch('config/getUserConfig')
-        }
-
         return {
-            configGui: store.state.config.configGui,
-            netChoices: store.state.config.netChoices,
-            configPlayout: store.state.config.configPlayout,
-            configUser: store.state.config.configUser,
             oldPass: null,
             newPass: null,
             confirmPass: null,
@@ -244,8 +235,31 @@ export default {
         }
     },
 
-    data () {
+    computed: {
-        return {
+        ...mapState('config', ['netChoices']),
+        configGui: {
+            get () {
+                return this.$store.state.config.configGui
+            },
+            set (config) {
+                this.$store.commit('config/UPDATE_GUI_CONFIG', config)
+            }
+        },
+        configPlayout: {
+            get () {
+                return this.$store.state.config.configPlayout
+            },
+            set (config) {
+                this.$store.commit('config/UPDATE_PLAYLOUT_CONFIG', config)
+            }
+        },
+        configUser: {
+            get () {
+                return this.$store.state.config.configUser
+            },
+            set (config) {
+                this.$store.commit('config/UPDATE_USER_CONFIG', config)
+            }
         }
     },
 

ffplayout/frontend/plugins/nuxt-client-init.js

@@ -0,0 +1,3 @@
+export default async (context) => {
+    await context.store.dispatch('config/nuxtClientInit', context)
+}

ffplayout/frontend/store/config.js

@@ -25,6 +25,14 @@ export const mutations = {
 }
 
 export const actions = {
+    async nuxtClientInit ({ commit, dispatch, rootState }) {
+        if (rootState.auth.isLogin) {
+            await dispatch('getGuiConfig')
+            await dispatch('getPlayoutConfig')
+            await dispatch('getUserConfig')
+        }
+    },
+
     async getGuiConfig ({ commit, state }) {
         const options = await this.$axios.options('api/player/guisettings/')
         const response = await this.$axios.get('api/player/guisettings/')
@@ -67,6 +75,7 @@ export const actions = {
         } else {
             response = await this.$axios.put(`api/player/guisettings/${obj.id}/`, stringObj)
         }
+
         return response
     },