import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
products: [
{name: 'Banana Skin', price: 20},
{name: 'Shiny Star', price: 40},
{name: 'Green Shells', price: 60},
{name: 'Red Shells', price: 80}
]
},
getters: {
saleProducts: (state) => {
var saleProducts = state.products.map( product => {
return {
name: '**' + product.name + '**',
price: product.price / 2,
};
});
return saleProducts;
}
}
});
<template>
<div id="product-list-one">
<h2>Product List One</h2>
<ul>
<li v-for="product in saleProducts">
<span class="name">{{ product.name }}</span>
<span class="price">£{{ product.price }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
products(){
return this.$store.state.products
},
saleProducts(){
return this.$store.getters.saleProducts
}
}
}
</script>