export default {

  computed: { 
    value() { 
      return this.$store.state.someValue
    },
  },

  methods: {
    update(nextValue) { 
      this.$store.commit('namespace/updateValue', nextValue)
    },
  },

}

npm install \
  @sum.cumo/vue-states \
  --save

import VueStates from '@sum.cumo/vue-states'

Vue.use(VueStates)

export default {
  name: 'Warehouse',

  data() {
    return { 
      products: [],
    }
  },

  computed: { 
    productsCount() { 
      return this.products.length 
    },
  },

  methods: {
    async loadProducts() { 
      this.saveProducts(
        await this.$apollo.query({ query: productsQuery })
      )
    },
    saveProducts(products) {
      this.products = products
    }
  },
}

<template>
  <div>
    Product count: {{ Warehouse.productsCount }}
    <warehouse-list />
  </div>
</template>

<script>
import Warehouse from '@/models/Warehouse'

export default {
   name: 'WarehouseView',

   models: {
      Warehouse,
   },
}

</script>

<template>
   <section>
      <div
         v-for="product of Warehouse.products"
         :key="product.id"
      >
         {{ product.count }} x {{ product.label }}
         <button @click="Warehouse.incoming(product.id)">
            Add
         </button>
         <button @click="Warehouse.outgoing(product.id)">
            Remove
         </button>
      </div>
   </section>
</template>

<script>
export default {
  name: 'WarehouseList',

  injectModels: [
    'Warehouse',
  ],
}
</script>