WIP: move more state management to vuex

src/components/DictionaryView.vue

@@ -248,12 +248,8 @@ export default {
   data: function() {
     return {
       article_key: 0,
-      search_results: {},
-      lang: this.$store.state.defaultDict,
       waiting_for_articles: true,
       waiting_for_metadata: true,
-      article: null,
-      error: null,
       monthly_bm: null,
       monthly_nn: null,
       event: null,
@@ -273,7 +269,23 @@ export default {
     },
     get_search_endpoint: function() {
       return api
-    }    
+    },    
+    search_results: {
+      get() { return this.$store.state.search_results },
+      set(value) { this.$store.commit('setState', {name: 'search_results', value})}
+    },
+    lang: {
+      get() { return this.$store.state.lang },
+      set(value) { this.$store.commit('setState', {name: 'lang', value})}
+    },
+    article: {
+      get() { return this.$store.state.article },
+      set(value) { this.$store.commit('setState', {name: 'article', value})}
+    },
+    error: {
+      get() { return this.$store.state.error },
+      set(value) { this.$store.commit('setState', {name: 'error', value})}
+    }
   },
   components: {
     Article,

src/main.js

@@ -19,56 +19,6 @@ Vue.use(VuePlausible, {
 
 Vue.$plausible.enableAutoPageviews()
 
-// All interaction with local storage is encapsulated in vuex
-const store = new Vuex.Store({
-  strict: true,
-  state: {
-    showSearchToolbar: null,
-    showInflectionNo: null,
-    currentLocale: null,
-    collapseArticles: null,
-    menuOpen: false
-  },
-  mutations: {
-    initStore(state) {
-      state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false
-      state.showInflectionNo = localStorage.getItem('showInflectionNo') || false
-      state.currentLocale = localStorage.getItem('currentLocale')
-      state.defaultDict = localStorage.getItem('defaultDict') || 'bm,nn'
-      state.collapseArticles = localStorage.getItem('collapseArticles') || window.innerWidth < 700
-
-      let locales = navigator.languages.map(l => l.split("-")[0])
-      if (!state.currentLocale) {
-        if (locales.includes("nn")) state.currentLocale = "nno"
-        else if (locales.includes("nb")) state.currentLocale = "nob"
-        else if (locales.includes("no")) state.currentLocale = "nob"
-        else state.currentLocale = "eng"
-      }
-    },
-    setLocale(state, payload) {
-      state.currentLocale = payload.value
-      payload.i18n.locale = payload.value
-      localStorage.setItem("currentLocale", payload.value);
-    },
-    toggle(state, setting) {
-      let value = !state[setting]
-      state[setting] = value
-      localStorage.setItem(setting, value);
-    },
-    setDefaultDict(state, value) {
-      localStorage.setItem("defaultDict", value)
-    },
-    resetStore() {
-      localStorage.removeItem("showSearchToolbar")
-      localStorage.removeItem("showInflectionNo")
-      localStorage.removeItem("currentLocale")
-      localStorage.removeItem("collapseArticles")
-      this.commit("initStore")
-    },
-
-  },
-})
-
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -134,6 +84,98 @@ const router = new VueRouter({
   ]
 })
 
+// All interaction with local storage is encapsulated in vuex
+const store = new Vuex.Store({
+  strict: true,
+  state: {
+    showSearchToolbar: null,
+    showInflectionNo: null,
+    currentLocale: null,
+    collapseArticles: null,
+    menuOpen: false,
+
+    search_results: {},
+    lang: null,
+    article: null,
+    error: null,
+    scope: null,
+    pos_selected: null,
+    article_info: null,
+    page: null,
+    perPage: null,
+    selected: null,
+    inflection_suggestions: null
+   
+
+  },
+  mutations: {
+    initStore(state) {
+      console.log("INIT_STATE",state)
+      state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false
+      state.showInflectionNo = localStorage.getItem('showInflectionNo') || false
+      state.currentLocale = localStorage.getItem('currentLocale')
+      state.defaultDict = localStorage.getItem('defaultDict') || 'bm,nn'
+      state.collapseArticles = localStorage.getItem('collapseArticles') || window.innerWidth < 700
+
+      let locales = navigator.languages.map(l => l.split("-")[0])
+      if (!state.currentLocale) {
+        if (locales.includes("nn")) state.currentLocale = "nno"
+        else if (locales.includes("nb")) state.currentLocale = "nob"
+        else if (locales.includes("no")) state.currentLocale = "nob"
+        else state.currentLocale = "eng"
+      }
+
+    },
+    initRouteVariables(state) {
+      state.lang = router.history.current.params.lang || localStorage.getItem('defaultDict') || 'bm,nn'
+      state.scope = router.history.current.query.scope
+      state.pos_selected = router.history.current.query.pos ? router.history.current.query.pos.toUpperCase() : null
+      state.page = router.history.current.query.page? parseInt(router.history.current.query.page) : null
+      state.perPage = router.history.current.query.perPage? parseInt(router.history.current.query.perPage) : null
+    },
+    setLocale(state, payload) {
+      state.currentLocale = payload.value
+      payload.i18n.locale = payload.value
+      localStorage.setItem("currentLocale", payload.value);
+    },
+    toggle(state, setting) {
+      let value = !state[setting]
+      state[setting] = value
+      localStorage.setItem(setting, value);
+    },
+    setDefaultDict(state, value) {
+      localStorage.setItem("defaultDict", value)
+      state.defaultDict = value
+    },
+    resetStore() {
+      localStorage.removeItem("showSearchToolbar")
+      localStorage.removeItem("showInflectionNo")
+      localStorage.removeItem("currentLocale")
+      localStorage.removeItem("collapseArticles")
+      this.commit("initStore")
+    },
+    updateHistory(state) {
+      history.replaceState({article: state.article, 
+        search_results: state.search_results, 
+        lang: state.lang, 
+        error: state.error,
+        event: state.event, 
+        pos_selected: state.pos_selected, 
+        scope: state.scope, 
+        article_info: state.article_info, 
+        page: state.page,
+        perPage: state.perPage,
+        selected: state.selected,
+        inflection_suggestions: state.inflection_suggestions}, '')
+    },
+    setState(state, payload) {
+      console.log("PAYLOAD", payload)
+      state[payload.name] = payload.value
+    }
+
+  }
+})
+
 /*
 router.beforeEach((to, from, next) => {
   console.log("to", to)