use computed properties for examples

examples/counter/Counter.vue

@@ -12,14 +12,9 @@
 import vuex from './vuex'
 
 export default {
-  data () {
-    return {
-      // this is how we connect the component's state to
-      // a part of vuex's state tree. `vuex.get()` returns
-      // a Cursor, which is essentially an event emitter that
-      // lets you subscribe to value changes. When Vuex is used,
-      // Vue instances knows how to handle Cursors inside data.
-      count: vuex.get('count')
+  computed: {
+    count () {
+      return vuex.state.count
     }
   },
   methods: vuex.actions

examples/counter/vuex.js

@@ -31,7 +31,7 @@ const actions = {
   // the first being the dispatch function and the second is
   // the state tree.
   incrementIfOdd: () => (dispatch, state) => {
-    if (state.count % 2 === 1) {
+    if ((state.count + 1) % 2 === 0) {
       dispatch(INCREMENT)
     }
   },

examples/shopping-cart/components/Cart.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="cart">
     <h2>Your Cart</h2>
-    <p v-show="!cart.added.length"><i>Please add some products to cart.</i></p>
+    <p v-show="!products.length"><i>Please add some products to cart.</i></p>
     <ul>
       <li v-for="p in products">
         {{ p.title }} - {{ p.price | currency }} x {{ p.quantity }}
       </li>
     </ul>
     <p>Total: {{ total | currency }}</p>
-    <p><button :disabled="!cart.added.length" @click="checkout">Checkout</button></p>
-    <p v-show="cart.lastCheckout">Checkout {{ cart.lastCheckout }}.</p>
+    <p><button :disabled="!products.length" @click="checkout">Checkout</button></p>
+    <p v-show="checkoutStatus">Checkout {{ checkoutStatus }}.</p>
   </div>
 </template>
 
@@ -18,14 +18,9 @@ import vuex from '../vuex'
 const { checkout } = vuex.actions
 
 export default {
-  data () {
-    return {
-      cart: vuex.get('cart')
-    }
-  },
   computed: {
     products () {
-      return this.cart.added.map(({ id, quantity }) => {
+      return vuex.state.cart.added.map(({ id, quantity }) => {
         const product = vuex.state.products.find(p => p.id === id)
         return {
           title: product.title,
@@ -34,6 +29,9 @@ export default {
         }
       })
     },
+    checkoutStatus () {
+      return vuex.state.cart.lastCheckout
+    },
     total () {
       return this.products.reduce((total, p) => {
         return total + p.price * p.quantity

examples/shopping-cart/components/ProductList.vue

@@ -17,9 +17,9 @@ import vuex from '../vuex'
 const { getAllProducts, addToCart } = vuex.actions
 
 export default {
-  data () {
-    return {
-      products: vuex.get('products')
+  computed: {
+    products () {
+      return vuex.state.products
     }
   },
   created () {

examples/todomvc/components/App.vue

@@ -65,12 +65,14 @@ export default {
   components: { Todo },
   data () {
     return {
-      todos: vuex.get('todos'),
       visibility: 'all',
       filters: filters
     }
   },
   computed: {
+    todos () {
+      return vuex.state.todos
+    },
     allChecked () {
       return this.todos.every(todo => todo.done)
     },