From 41288fa3c64e3b234aec6fc67cf2a6f7ede77024 Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Sat, 25 Dec 2021 13:45:33 +0100
Subject: [PATCH] WIP: move more state management to vuex
---
src/components/DictionaryView.vue | 22 +++--
src/main.js | 142 +++++++++++++++++++-----------
2 files changed, 109 insertions(+), 55 deletions(-)
diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue
index 402a7d73..2708dd7b 100644
--- a/src/components/DictionaryView.vue
+++ b/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,
diff --git a/src/main.js b/src/main.js
index 0096de98..00c142ff 100644
--- a/src/main.js
+++ b/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)
--
GitLab