update cart example for new API

Author: yyx990803

examples/shopping-cart/components/Cart.vue

@@ -14,23 +14,25 @@
 </template>
 
 <script>
-import store from '../store'
-const { checkout } = store.actions
+import { checkout } from '../store/actions'
+import { cartProducts } from '../store/getters'
 
 export default {
-  computed: {
-    products: store.getters.cartProducts,
-    checkoutStatus () {
-      return store.state.cart.lastCheckout
+  vuex: {
+    state: {
+      products: cartProducts,
+      checkoutStatus: ({ cart }) => cart.lastCheckout
     },
+    actions: {
+      checkout
+    }
+  },
+  computed: {
     total () {
       return this.products.reduce((total, p) => {
         return total + p.price * p.quantity
       }, 0)
     }
-  },
-  methods: {
-    checkout
   }
 }
 </script>

examples/shopping-cart/components/ProductList.vue

@@ -13,24 +13,20 @@
 </template>
 
 <script>
-import store from '../store'
-const { getAllProducts, addToCart } = store.actions
+import { getAllProducts, addToCart } from '../store/actions'
 
 export default {
-  computed: {
-    products () {
-      return store.state.products
+  vuex: {
+    state: {
+      products: ({ products }) => products.all
+    },
+    actions: {
+      getAllProducts,
+      addToCart
     }
   },
   created () {
-    getAllProducts()
-  },
-  methods: {
-    addToCart (product) {
-      if (product.inventory > 0) {
-        addToCart(product.id)
-      }
-    }
+    this.getAllProducts()
   }
 }
 </script>

examples/shopping-cart/main.js

@@ -1,8 +1,10 @@
 import 'babel-polyfill'
 import Vue from 'vue'
 import App from './components/App.vue'
+import store from './store'
 
 new Vue({
   el: 'body',
+  store,
   components: { App }
 })

examples/shopping-cart/store/actions.js

@@ -1,7 +1,11 @@
 import shop from '../api/shop'
 import * as types from './mutation-types'
 
-export const addToCart = types.ADD_TO_CART
+export const addToCart = ({ dispatch }, product) => {
+  if (product.inventory > 0) {
+    dispatch(types.ADD_TO_CART, product.id)
+  }
+}
 
 export const checkout = ({ dispatch, state }, products) => {
   const savedCartItems = [...state.cart.added]

examples/shopping-cart/store/getters.js

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

examples/shopping-cart/store/index.js

@@ -1,23 +1,18 @@
 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'
+import cart from './modules/cart'
+import products from './modules/products'
 
 Vue.use(Vuex)
 Vue.config.debug = true
 
 const debug = process.env.NODE_ENV !== 'production'
 
 export default new Vuex.Store({
-  state: {
-    cart: cartInitialState,
-    products: productsInitialState
+  modules: {
+    cart,
+    products
   },
-  actions,
-  getters,
-  mutations: [cartMutations, productsMutations],
   strict: debug,
   middlewares: debug ? [Vuex.createLogger()] : []
 })

examples/shopping-cart/store/modules/cart.js

@@ -7,18 +7,18 @@ import {
 
 // initial state
 // shape: [{ id, quantity }]
-export const cartInitialState = {
+const state = {
   added: [],
   lastCheckout: null
 }
 
 // mutations
-export const cartMutations = {
-  [ADD_TO_CART] ({ cart }, productId) {
-    cart.lastCheckout = null
-    const record = cart.added.find(p => p.id === productId)
+const mutations = {
+  [ADD_TO_CART] (state, productId) {
+    state.lastCheckout = null
+    const record = state.added.find(p => p.id === productId)
     if (!record) {
-      cart.added.push({
+      state.added.push({
         id: productId,
         quantity: 1
       })
@@ -27,19 +27,24 @@ export const cartMutations = {
     }
   },
 
-  [CHECKOUT_REQUEST] ({ cart }) {
+  [CHECKOUT_REQUEST] (state) {
     // clear cart
-    cart.added = []
-    cart.lastCheckout = null
+    state.added = []
+    state.lastCheckout = null
   },
 
-  [CHECKOUT_SUCCESS] ({ cart }) {
-    cart.lastCheckout = 'successful'
+  [CHECKOUT_SUCCESS] (state) {
+    state.lastCheckout = 'successful'
   },
 
-  [CHECKOUT_FAILURE] ({ cart }, savedCartItems) {
+  [CHECKOUT_FAILURE] (state, savedCartItems) {
     // rollback to the cart saved before sending the request
-    cart.added = savedCartItems
-    cart.lastCheckout = 'failed'
+    state.added = savedCartItems
+    state.lastCheckout = 'failed'
   }
 }
+
+export default {
+  state,
+  mutations
+}

examples/shopping-cart/store/modules/products.js

@@ -4,18 +4,22 @@ import {
 } from '../mutation-types'
 
 // initial state
-export const productsInitialState = []
+const state = {
+  all: []
+}
 
 // mutations
-export const productsMutations = {
+const mutations = {
   [RECEIVE_PRODUCTS] (state, products) {
-    state.products = products
+    state.all = products
   },
 
-  [ADD_TO_CART] ({ products }, productId) {
-    const product = products.find(p => p.id === productId)
-    if (product.inventory > 0) {
-      product.inventory--
-    }
+  [ADD_TO_CART] (state, productId) {
+    state.all.find(p => p.id === productId).inventory--
   }
 }
+
+export default {
+  state,
+  mutations
+}