@sum.cumo/vue-states @sum.cumo/vue-history
Johannes Lamberts @jlbrts
JS Developer @sum.cumo
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>
state management
Johannes Lamberts @jlbrts
JS Developer @sum.cumo
Thank you!
https://medium.com/@jlbrts/introducing-a-new-state-management-for-vue-js-b85be00b3299
https://slides.com/jlbrts/vue-state-management
https://github.com/JohannesLamberts/jsunconf-2019-vue-state-demo