[MOD] vuex-persistedstate 추가

docs-front/layouts/default.vue

@@ -93,6 +93,7 @@
       class="app-bar-wrap"
       clipped-left
     >
+    <client-only>
       <v-row no-gutters align="center">
         <span  style="cursor:pointer;" class="pa-2">
           <img @click="$router.push('/')"  src="/logo_v2/01.png" cover height="28"/>
@@ -108,7 +109,7 @@
         
         <v-btn
           v-if="$store.state.editMode"
-          @click="$store.state.editMode = false"
+          @click="$store.commit('setEditMode', false)"
           elevation="0"
           color="primary"
           class="ml-4"
@@ -149,10 +150,9 @@
           
         <v-icon @click="showSearch = !showSearch" class="header-icon">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
 
-        <!-- <v-btn @click="$store.state.editMode = !$store.state.editMode" elevation="0">편집</v-btn> -->
         <v-app-bar-nav-icon class="mobile-show" v-if="!drawer" @click.stop="drawer = !drawer" />
-
       </v-row>
+    </client-only>
 
       <v-progress-linear absolute bottom :value="scrollPositionRate" height="1" background-color="#eee" color="primary" style="transition:none !important;"></v-progress-linear>
       
@@ -448,7 +448,7 @@ export default{
     editOn(){
       if(this.keyword === '열려라 문'){
         this.editDialogActive = true
-        this.$store.state.editMode = true
+        this.$store.commit('setEditMode', true)
       }
     },
     createEditModeList(){

docs-front/nuxt.config.js

@@ -42,6 +42,7 @@ export default {
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     //'~/plugins/global.js'
+    {src:'~/plugins/vuex-persis.js', ssr:false},
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

docs-front/package-lock.json

@@ -20,7 +20,9 @@
         "vue-no-ssr": "^1.1.1",
         "vue-server-renderer": "^2.7.10",
         "vue-template-compiler": "^2.7.10",
-        "vuetify": "^2.6.10"
+        "vuetify": "^2.6.10",
+        "vuex": "^3.4.0",
+        "vuex-persistedstate": "^4.1.0"
       },
       "devDependencies": {
         "@nuxtjs/svg": "^0.2.0",
@@ -3084,6 +3086,14 @@
         "vuex": "^3.6.2"
       }
     },
+    "node_modules/@nuxt/vue-app/node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/@nuxt/vue-renderer": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@nuxt/vue-renderer/-/vue-renderer-2.16.0.tgz",
@@ -12202,6 +12212,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==",
+      "deprecated": "older versions vulnerable to prototype pollution"
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -14512,13 +14528,26 @@
       }
     },
     "node_modules/vuex": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",
+      "integrity": "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg==",
       "peerDependencies": {
         "vue": "^2.0.0"
       }
     },
+    "node_modules/vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "peerDependencies": {
+        "vuex": "^3.0 || ^4.0.0-rc"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -17847,6 +17876,14 @@
         "vue-router": "^3.6.5",
         "vue-template-compiler": "^2.7.14",
         "vuex": "^3.6.2"
+      },
+      "dependencies": {
+        "vuex": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+          "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+          "requires": {}
+        }
       }
     },
     "@nuxt/vue-renderer": {
@@ -24633,6 +24670,11 @@
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.0.tgz",
       "integrity": "sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ=="
     },
+    "shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw=="
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -26406,11 +26448,20 @@
       }
     },
     "vuex": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",
+      "integrity": "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg==",
       "requires": {}
     },
+    "vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

docs-front/package.json

@@ -21,7 +21,9 @@
     "vue-no-ssr": "^1.1.1",
     "vue-server-renderer": "^2.7.10",
     "vue-template-compiler": "^2.7.10",
-    "vuetify": "^2.6.10"
+    "vuetify": "^2.6.10",
+    "vuex": "^3.4.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@nuxtjs/svg": "^0.2.0",

docs-front/plugins/vuex-persis.js

+import createPersistedState from 'vuex-persistedstate'
+
+export default ({store}) => {
+  createPersistedState({
+  })(store)
+}
\ No newline at end of file

docs-front/store/index.js

@@ -13,11 +13,10 @@ const store = () => new Vuex.Store({
     theme:false
   },
   mutations:{
-    
-    setTheme: (state, theme) => {
-      state.theme = theme
+    setEditMode: (state, val) => {
+      state.editMode = val
     },
-        setGuide: (state, {guideId, flag}) => {
+    setGuide: (state, {guideId, flag}) => {
       state.guideId = guideId
       if(flag) {
         state.guideTreeFlag = !state.guideTreeFlag
@@ -25,7 +24,10 @@ const store = () => new Vuex.Store({
     },
     setGuideNavigator: (state, guideNavigator) => {
       state.guideNavigator = guideNavigator
-    }
+    },
+    setTheme: (state, theme) => {
+      state.theme = theme
+    },
   },
   actions:{