vuestorefront#2810 fix using the wrong import; using store getters for orders history items

Author: Benjamin Klein

core/modules/order/components/UserOrders.ts

@@ -1,3 +1,4 @@
+import { mapGetters } from 'vuex';
 
 /**
  * Component responsible for displaying user orders. Requires User module.
@@ -6,13 +7,14 @@ export const UserOrders = {
   name: 'UserOrders',
   computed: {
     ordersHistory () {
-      return this.$store.state.user.orders_history.items
+      return this.ordersHistoryItems()
     },
     isHistoryEmpty () {
-      return this.$store.state.user.orders_history.items.length < 1
+      return this.ordersHistoryItems().length < 1
     }
   },
   methods: {
+    ...mapGetters('user', ['ordersHistoryItems']),
     remakeOrder (products) {
       products.forEach(item => {
         this.$store.dispatch('product/single', { options: { sku: item.sku }, setCurrentProduct: false, selectDefaultVariant: false }).then((product) => {

core/modules/user/store/getters.ts

@@ -9,6 +9,9 @@ const getters: GetterTree<UserState, RootState> = {
   isLocalDataLoaded: state => state.local_data_loaded,
   getUserToken (state) {
     return state.token
+  },
+  ordersHistoryItems (state) {
+    return state.orders_history.items
   }
 }
 

src/modules/order-history/components/UserOrders.ts

@@ -1,9 +1,10 @@
 import { isServer, bottomVisible } from '@vue-storefront/core/helpers'
-import MyOrder from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder'
+import MyOrders from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrders'
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'UserOrders',
-  mixins: [MyOrder],
+  mixins: [MyOrders],
   data () {
     return {
       pagination: {
@@ -31,15 +32,11 @@ export default {
   },
   computed: {
     ordersHistory () {
-      let items = []
-      items = this.$store.state.user.orders_history.items
+      let items = this.ordersHistoryItems()
       if (!isServer && this.lazyLoadOrdersOnscroll) {
         items = this.paginate(items, this.pagination.perPage, this.pagination.current)
       }
       return items
-    },
-    isHistoryEmpty () {
-      return this.$store.state.user.orders_history.items.length < 1
     }
   },
   methods: {