jenhjlim/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vuex-playlist</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

## src.App.vue
<template>
  <div id="app">
    <product-list-one></product-list-one>
    <product-list-two></product-list-two>
  </div>
</template>

<script>
import ProductListOne from './components/ProductListOne.vue';
import ProductListTwo from './components/ProductListTwo.vue';

export default {
  components: {
    'product-list-one': ProductListOne,
    'product-list-two': ProductListTwo,
  },
  name: 'app'
}
</script>

<style>
body{
  font-family: Ubuntu;
  color: #555;
}
</style>

## src.components.ProductListOne.vue
<template>
  <div id='product-list-one'>
    <h2>Product List One</h2>
      <ul>
        <li v-for="product in saleProducts" v-bind:key="product.id">
          <span class='name'>{{ product.name }}</span>
          <span class='price'>${{ product.price }}</span>
        </li>
      </ul>
      <button @click="reducePrice(4)">Reduce Price</button>
  </div>
</template>

<script>
// import 'mapGetters' & 'mapActions' from Vuex
import { mapGetters } from 'vuex';
import { mapActions } from 'vuex';

export default {
  computed:{
    products(){
      return this.$store.state.products;
    },
    // need 'Babel'
    ...mapGetters({
      'saleProducts'
    })
  },
  methods:{
    // need 'Babel'
    ...mapActions({
      'reducePrice'
    })
  }
}
</script>

<style scoped>
#product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    padding: 0;
}
#product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #E8800C;
}
</style>

## src.components.ProductListTwo.vue
<template>
  <div id="product-list-two">
    <h2>Product List Two</h2>
      <ul>
        <li v-for="product in saleProducts" v-bind:key="product.id">
          <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>

<style scoped>
#product-list-two{
    background: #D1E4FF;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-two ul{
    padding: 0;
    list-style-type: none;
}
#product-list-two li{
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #860CE8;
    display: block;
}
</style>

## src.main.js
import Vue from 'vue'
import App from './App.vue'
import { storeData } from './store/store'

new Vue({
  store: storeData,
  el: '#app',
  render: h => h(App)
})

## src.store.store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const storeData = new Vuex.Store({
  // strict: true,

  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;
    }
  },
  mutations:{
    reducePrice: (state, payload) => {
      state.products.forEach(product => {
        product.price -= payload;
      });
    }
  },
  actions:{
    reducePrice: (context, payload) => {
      setTimeout(function(){
        context.commit('reducePrice', payload)
      }, 2000)
    }
  }
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>vuex-playlist</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="/dist/build.js"></script>
	</body>
	</html>
	<template>
	<div id="app">
	<product-list-one></product-list-one>
	<product-list-two></product-list-two>
	</div>
	</template>

	<script>
	import ProductListOne from './components/ProductListOne.vue';
	import ProductListTwo from './components/ProductListTwo.vue';

	export default {
	components: {
	'product-list-one': ProductListOne,
	'product-list-two': ProductListTwo,
	},
	name: 'app'
	}
	</script>

	<style>
	body{
	font-family: Ubuntu;
	color: #555;
	}
	</style>
	<template>
	<div id='product-list-one'>
	<h2>Product List One</h2>
	<ul>
	<li v-for="product in saleProducts" v-bind:key="product.id">
	<span class='name'>{{ product.name }}</span>
	<span class='price'>${{ product.price }}</span>
	</li>
	</ul>
	<button @click="reducePrice(4)">Reduce Price</button>
	</div>
	</template>

	<script>
	// import 'mapGetters' & 'mapActions' from Vuex
	import { mapGetters } from 'vuex';
	import { mapActions } from 'vuex';

	export default {
	computed:{
	products(){
	return this.$store.state.products;
	},
	// need 'Babel'
	...mapGetters({
	'saleProducts'
	})
	},
	methods:{
	// need 'Babel'
	...mapActions({
	'reducePrice'
	})
	}
	}
	</script>

	<style scoped>
	#product-list-one{
	background: #FFF8B1;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
	margin-bottom: 30px;
	padding: 10px 20px;
	}
	#product-list-one ul{
	padding: 0;
	}
	#product-list-one li{
	display: inline-block;
	margin-right: 10px;
	margin-top: 10px;
	padding: 20px;
	background: rgba(255,255,255,0.7);
	}
	.price{
	font-weight: bold;
	color: #E8800C;
	}
	</style>
	<template>
	<div id="product-list-two">
	<h2>Product List Two</h2>
	<ul>
	<li v-for="product in saleProducts" v-bind:key="product.id">
	<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>

	<style scoped>
	#product-list-two{
	background: #D1E4FF;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
	margin-bottom: 30px;
	padding: 10px 20px;
	}
	#product-list-two ul{
	padding: 0;
	list-style-type: none;
	}
	#product-list-two li{
	margin-right: 10px;
	margin-top: 10px;
	padding: 20px;
	background: rgba(255,255,255,0.7);
	}
	.price{
	font-weight: bold;
	color: #860CE8;
	display: block;
	}
	</style>
	import Vue from 'vue'
	import App from './App.vue'
	import { storeData } from './store/store'

	new Vue({
	store: storeData,
	el: '#app',
	render: h => h(App)
	})
	import Vue from 'vue';
	import Vuex from 'vuex';

	Vue.use(Vuex);

	export const storeData = new Vuex.Store({
	// strict: true,

	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;
	}
	},
	mutations:{
	reducePrice: (state, payload) => {
	state.products.forEach(product => {
	product.price -= payload;
	});
	}
	},
	actions:{
	reducePrice: (context, payload) => {
	setTimeout(function(){
	context.commit('reducePrice', payload)
	}, 2000)
	}
	}
	});