로컬스토리지로 vuex 상태 유지 (Persist Vuex in localStorage),

npm i vuex-persistedstate

client/nuxt.config.js

@@ -32,6 +32,7 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
+    { src: '~/plugins/localStorage.js', ssr: false }
   ],
   /*
   ** Nuxt.js dev-modules

client/package-lock.json

@@ -7437,6 +7437,11 @@
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg=="
     },
+    "shvl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.0.tgz",
+      "integrity": "sha512-WbpzSvI5XgVGJ3A4ySGe8hBxj0JgJktfnoLhhJmvITDdK21WPVWwgG8GPlYEh4xqdti3Ff7PJ5G0QrRAjNS0Ig=="
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -8612,6 +8617,15 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
       "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
     },
+    "vuex-persistedstate": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-2.7.0.tgz",
+      "integrity": "sha512-mpko65DUMBY4mF4sSGsgrqjE7fwO373LFZeuNrC55glRuBBAK4dkgzjr4j4Bij7WtMoKuo2t2w0NGenjauISaQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

client/package.json

@@ -17,7 +17,8 @@
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0",
     "nuxt": "^2.0.0",
-    "vue-star-rating": "^1.6.1"
+    "vue-star-rating": "^1.6.1",
+    "vuex-persistedstate": "^2.7.0"
   },
   "devDependencies": {}
 }

client/plugins/localStorage.js

@@ -0,0 +1,8 @@
+import createPersistedState from  'vuex-persistedstate'
+
+export default ({ store }) => {
+  window.onNuxtReady(() => {
+    createPersistedState({})(store)
+  })
+}
+

client/store/index.js

@@ -10,7 +10,7 @@ export const actions = {
     if (!cartProduct) {
       commit('pushProductToCart', product)
     } else {
-      commit('incrementProductQty', product)
+      commit('incrementProductQty', cartProduct)
     }
 
     commit('incrementCartLength')

package-lock.json

@@ -1,3 +1,25 @@
 {
-  "lockfileVersion": 1
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
+    "shvl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.0.tgz",
+      "integrity": "sha512-WbpzSvI5XgVGJ3A4ySGe8hBxj0JgJktfnoLhhJmvITDdK21WPVWwgG8GPlYEh4xqdti3Ff7PJ5G0QrRAjNS0Ig=="
+    },
+    "vuex-persistedstate": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-2.7.0.tgz",
+      "integrity": "sha512-mpko65DUMBY4mF4sSGsgrqjE7fwO373LFZeuNrC55glRuBBAK4dkgzjr4j4Bij7WtMoKuo2t2w0NGenjauISaQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.0"
+      }
+    }
+  }
 }