port shopping cart example

examples/shopping-cart/components/Cart.vue

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

examples/shopping-cart/components/ProductList.vue

@@ -13,20 +13,17 @@
 </template>
 
 <script>
-import { getAllProducts, addToCart } from '../vuex/actions'
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
-  vuex: {
-    getters: {
-      products: ({ products }) => products.all
-    },
-    actions: {
-      getAllProducts,
-      addToCart
-    }
-  },
+  computed: mapGetters({
+    products: 'allProducts'
+  }),
+  methods: mapActions([
+    'addToCart'
+  ]),
   created () {
-    this.getAllProducts()
+    this.$store.call('getAllProducts')
   }
 }
 </script>

examples/shopping-cart/vuex/actions.js

@@ -3,7 +3,9 @@ import * as types from './mutation-types'
 
 export const addToCart = ({ dispatch }, product) => {
   if (product.inventory > 0) {
-    dispatch(types.ADD_TO_CART, product.id)
+    dispatch(types.ADD_TO_CART, {
+      id: product.id
+    })
   }
 }
 
@@ -13,12 +15,12 @@ export const checkout = ({ dispatch, state }, products) => {
   shop.buyProducts(
     products,
     () => dispatch(types.CHECKOUT_SUCCESS),
-    () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
+    () => dispatch(types.CHECKOUT_FAILURE, { savedCartItems })
   )
 }
 
 export const getAllProducts = ({ dispatch }) => {
   shop.getProducts(products => {
-    dispatch(types.RECEIVE_PRODUCTS, products)
+    dispatch(types.RECEIVE_PRODUCTS, { products })
   })
 }

examples/shopping-cart/vuex/getters.js

@@ -1,3 +1,7 @@
+export const checkoutStatus = state => state.cart.checkoutStatus
+
+export const allProducts = state => state.products.all
+
 export const cartProducts = state => {
   return state.cart.added.map(({ id, quantity }) => {
     const product = state.products.all.find(p => p.id === id)

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

@@ -1,25 +1,20 @@
-import {
-  ADD_TO_CART,
-  CHECKOUT_REQUEST,
-  CHECKOUT_SUCCESS,
-  CHECKOUT_FAILURE
-} from '../mutation-types'
+import * as types from '../mutation-types'
 
 // initial state
 // shape: [{ id, quantity }]
 const state = {
   added: [],
-  lastCheckout: null
+  checkoutStatus: null
 }
 
 // mutations
 const mutations = {
-  [ADD_TO_CART] (state, productId) {
+  [types.ADD_TO_CART] (state, { id }) {
     state.lastCheckout = null
-    const record = state.added.find(p => p.id === productId)
+    const record = state.added.find(p => p.id === id)
     if (!record) {
       state.added.push({
-        id: productId,
+        id,
         quantity: 1
       })
     } else {
@@ -27,20 +22,20 @@ const mutations = {
     }
   },
 
-  [CHECKOUT_REQUEST] (state) {
+  [types.CHECKOUT_REQUEST] (state) {
     // clear cart
     state.added = []
-    state.lastCheckout = null
+    state.checkoutStatus = null
   },
 
-  [CHECKOUT_SUCCESS] (state) {
-    state.lastCheckout = 'successful'
+  [types.CHECKOUT_SUCCESS] (state) {
+    state.checkoutStatus = 'successful'
   },
 
-  [CHECKOUT_FAILURE] (state, savedCartItems) {
+  [types.CHECKOUT_FAILURE] (state, { savedCartItems }) {
     // rollback to the cart saved before sending the request
     state.added = savedCartItems
-    state.lastCheckout = 'failed'
+    state.checkoutStatus = 'failed'
   }
 }
 

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

@@ -1,7 +1,4 @@
-import {
-  RECEIVE_PRODUCTS,
-  ADD_TO_CART
-} from '../mutation-types'
+import * as types from '../mutation-types'
 
 // initial state
 const state = {
@@ -10,12 +7,12 @@ const state = {
 
 // mutations
 const mutations = {
-  [RECEIVE_PRODUCTS] (state, products) {
+  [types.RECEIVE_PRODUCTS] (state, { products }) {
     state.all = products
   },
 
-  [ADD_TO_CART] (state, productId) {
-    state.all.find(p => p.id === productId).inventory--
+  [types.ADD_TO_CART] (state, { id }) {
+    state.all.find(p => p.id === id).inventory--
   }
 }
 

examples/shopping-cart/vuex/store.js

@@ -1,15 +1,18 @@
 import Vue from 'vue'
 import Vuex from '../../../src'
+import * as actions from './actions'
+import * as getters from './getters'
 import cart from './modules/cart'
 import products from './modules/products'
 import createLogger from '../../../src/plugins/logger'
 
 Vue.use(Vuex)
-Vue.config.debug = true
 
 const debug = process.env.NODE_ENV !== 'production'
 
 export default new Vuex.Store({
+  actions,
+  getters,
   modules: {
     cart,
     products

src/index.js

@@ -81,7 +81,8 @@ class Store {
 
     // set state
     if (!isRoot && !hot) {
-      const parentState = getNestedState(this.state, path.slice(-1))
+      const parentState = getNestedState(this.state, path.slice(0, -1))
+      if (!parentState) debugger
       const moduleName = path[path.length - 1]
       Vue.set(parentState, moduleName, state || {})
     }
@@ -257,7 +258,7 @@ function extractModuleGetters (getters = {}, modules = {}, path = []) {
 }
 
 function enableStrictMode (store) {
-  store._vm.watch('state', () => {
+  store._vm.$watch('state', () => {
     if (!store._dispatching) {
       throw new Error(
         '[vuex] Do not mutate vuex store state outside mutation handlers.'