Updated counter-hot and shopping-cart with getters example.

Author: blake-newman

examples/counter-hot/Counter.vue

@@ -1,22 +1,26 @@
 <template>
   <div>
-    Clicked: {{ count }} times
+    Value: {{ count }}
     <button @click="increment">+</button>
     <button @click="decrement">-</button>
     <button @click="incrementIfOdd">Increment if odd</button>
     <button @click="incrementAsync">Increment async</button>
+    <div>
+      <div>Recent History: {{recentHistory}}</div>
+    </div>
   </div>
 </template>
 
 <script>
 import store from './store'
-
 export default {
   computed: {
     count () {
       return store.state.count
-    }
+    },
+    recentHistory: store.getters.recentHistory
   },
   methods: store.actions
+
 }
 </script>

examples/counter-hot/store/getters.js

@@ -0,0 +1,10 @@
+export default {
+  recentHistory (state) {
+    const end = state.history.length
+    const begin = end - 5 < 0 ? 0 : end - 5
+    return state.history
+      .slice(begin, end)
+      .toString()
+      .replace(/,/g, ', ')
+  }
+}

examples/counter-hot/store/index.js

@@ -2,26 +2,31 @@ import Vue from 'vue'
 import Vuex from '../../../src'
 import actions from './actions'
 import mutations from './mutations'
+import getters from './getters'
 
 Vue.use(Vuex)
 
 const state = {
-  count: 0
+  count: 0,
+  history: []
 }
 
 const store = new Vuex.Store({
   state,
   actions,
-  mutations
+  mutations,
+  getters
 })
 
 if (module.hot) {
-  module.hot.accept(['./actions', './mutations'], () => {
+  module.hot.accept(['./actions', './mutations', './getters'], () => {
     const newActions = require('./actions').default
     const newMutations = require('./mutations').default
+    const newGetters = require('./getters').default
     store.hotUpdate({
       actions: newActions,
-      mutations: newMutations
+      mutations: newMutations,
+      getters: newGetters
     })
   })
 }

examples/counter-hot/store/mutations.js

@@ -3,8 +3,10 @@ import { INCREMENT, DECREMENT } from './mutation-types'
 export default {
   [INCREMENT] (state) {
     state.count++
+    state.history.push('increment')
   },
   [DECREMENT] (state) {
     state.count--
+    state.history.push('decrement')
   }
 }

examples/shopping-cart/components/Cart.vue

@@ -19,16 +19,7 @@ const { checkout } = store.actions
 
 export default {
   computed: {
-    products () {
-      return store.state.cart.added.map(({ id, quantity }) => {
-        const product = store.state.products.find(p => p.id === id)
-        return {
-          title: product.title,
-          price: product.price,
-          quantity
-        }
-      })
-    },
+    products: store.getters.cartProducts,
     checkoutStatus () {
       return store.state.cart.lastCheckout
     },

examples/shopping-cart/store/getters.js

@@ -0,0 +1,10 @@
+export function cartProducts (state) {
+  return state.cart.added.map(({ id, quantity }) => {
+    const product = state.products.find(p => p.id === id)
+    return {
+      title: product.title,
+      price: product.price,
+      quantity
+    }
+  })
+}

examples/shopping-cart/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from '../../../src'
 import * as actions from './actions'
+import * as getters from './getters'
 import { cartInitialState, cartMutations } from './modules/cart'
 import { productsInitialState, productsMutations } from './modules/products'
 
@@ -15,6 +16,7 @@ export default new Vuex.Store({
     products: productsInitialState
   },
   actions,
+  getters,
   mutations: [cartMutations, productsMutations],
   strict: debug,
   middlewares: debug ? [Vuex.createLogger()] : []