Bugfix/multiple local cache load for wishlist and compare

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added clear filters button on desktop also and only show if filters are applied - @DaanKouters (#2342)
 - Improved docs at contributing.md and configuration.md (spelling etc.) - @ruthgeridema (#2421, #2422, #2423, #2425, #2426)
 - Fixed design issue of Country label on Edge 17 & Firefox - @ananth-iyer (#2390,#2399)
+- Wishlist and compare items are loaded from local cache only once, instead of every time when module component is rendered - @patzick (#2431)
 - Country field is filled by first counry from the list in cart in paymen section - @RakowskiPrzemyslaw (#2428)
 - Added video support in Product Gallery component. - @rain2o (#2433)
 - Improved product quantity change component in product and cart - @patzick (#2398, #2437)

core/modules/compare/store/actions.ts

@@ -9,8 +9,9 @@ import CompareState from '../types/CompareState'
 import { cacheStorage } from '../'
 import { Logger } from '@vue-storefront/core/lib/logger'
 const actions: ActionTree<CompareState, RootState> = {
-  load (context) {
-    const commit = context.commit
+  load ({ commit, getters }, force: boolean = false) {
+    if (!force && getters.isCompareLoaded) return
+    commit(types.SET_COMPARE_LOADED)
     cacheStorage.getItem('current-compare', (err, storedItems) => {
       if (err) throw new Error(err)
       commit(types.COMPARE_LOAD_COMPARE, storedItems)

core/modules/compare/store/getters.ts

@@ -4,7 +4,8 @@ import CompareState from '../types/CompareState'
 
 const getters: GetterTree<CompareState, RootState> = {
   isEmpty: (state) => state.items.length === 0,
-  isOnCompare: (state) => (product) => state.items.find(p => p.sku === product.sku)
+  isOnCompare: (state) => (product) => state.items.find(p => p.sku === product.sku),
+  isCompareLoaded: state => state.loaded
 }
 
 export default getters

core/modules/compare/store/index.ts

@@ -8,6 +8,7 @@ import CompareState from '../types/CompareState'
 export const module: Module<CompareState, RootState> = {
   namespaced: true,
   state: {
+    loaded: false,
     items: []
   },
   getters,

core/modules/compare/store/mutation-types.ts

@@ -2,3 +2,4 @@ export const SN_COMPARE = 'compare'
 export const COMPARE_ADD_ITEM = SN_COMPARE + '/ADD'
 export const COMPARE_DEL_ITEM = SN_COMPARE + '/DEL'
 export const COMPARE_LOAD_COMPARE = SN_COMPARE + '/LOAD'
+export const SET_COMPARE_LOADED = `${SN_COMPARE}/SET_COMPARE_LOADED`

core/modules/compare/store/mutations.ts

@@ -20,6 +20,9 @@ const mutations: MutationTree<CompareState> = {
   },
   [types.COMPARE_LOAD_COMPARE] (state, storedItems) {
     state.items = storedItems || []
+  },
+  [types.SET_COMPARE_LOADED] (state, isLoaded: boolean = true) {
+    state.loaded = isLoaded
   }
 }
 

core/modules/compare/types/CompareState.ts

@@ -1,3 +1,7 @@
 export default interface CompareState {
+  /**
+   * Informs if items to compare are already loaded from local cache.
+   */
+  loaded: boolean,
   items: any[]
 }

core/modules/wishlist/store/actions.ts

@@ -13,8 +13,9 @@ const actions: ActionTree<WishlistState, RootState> = {
   clear (context) {
     context.commit(types.WISH_LOAD_WISH, [])
   },
-  load (context) {
-    const commit = context.commit
+  load ({ commit, getters }, force: boolean = false) {
+    if (!force && getters.isWishlistLoaded) return
+    commit(types.SET_WISHLIST_LOADED)
     cacheStorage.getItem('current-wishlist', (err, storedItems) => {
       if (err) throw new Error(err)
       commit(types.WISH_LOAD_WISH, storedItems)

core/modules/wishlist/store/index.ts

@@ -7,9 +7,13 @@ import WishlistState from '../types/WishlistState'
 export const module:Module<WishlistState, RootState> = {
   namespaced: true,
   state: {
+    loaded: false,
     items: []
   },
   actions,
-  mutations
+  mutations,
+  getters: {
+    isWishlistLoaded: state => state.loaded
+  }
 }
 

core/modules/wishlist/store/mutation-types.ts

@@ -1,4 +1,5 @@
 export const SN_WISHLIST = 'wishlist'
 export const WISH_ADD_ITEM = SN_WISHLIST + '/ADD'
 export const WISH_DEL_ITEM = SN_WISHLIST + '/DEL'
-export const WISH_LOAD_WISH = SN_WISHLIST + '/LOAD'
+export const WISH_LOAD_WISH = SN_WISHLIST + '/LOAD'
+export const SET_WISHLIST_LOADED = `${SN_WISHLIST}/SET_WISHLIST_LOADED`

core/modules/wishlist/store/mutations.ts

@@ -21,6 +21,9 @@ const mutations: MutationTree<WishlistState> = {
   },
   [types.WISH_LOAD_WISH] (state, storedItems) {
     state.items = storedItems || []
+  },
+  [types.SET_WISHLIST_LOADED] (state, isLoaded: boolean = true) {
+    state.loaded = isLoaded
   }
 }
 

core/modules/wishlist/types/WishlistState.ts

@@ -1,3 +1,7 @@
 export default interface WishlistState {
+  /**
+   * Informs if wishlist is already loaded from local cache.
+   */
+  loaded: boolean,
   items: any[]
 }