diff --git a/examples/shopping-cart/components/Cart.vue b/examples/shopping-cart/components/Cart.vue
index a5808ace0..b5eabd497 100644
--- a/examples/shopping-cart/components/Cart.vue
+++ b/examples/shopping-cart/components/Cart.vue
@@ -3,8 +3,8 @@
Your Cart
Please add some products to cart.
- -
- {{ p.title }} - {{ p.price | currency }} x {{ p.quantity }}
+
-
+ {{ product.title }} - {{ product.price | currency }} x {{ product.quantity }}
Total: {{ total | currency }}
@@ -20,13 +20,9 @@ export default {
computed: {
...mapGetters({
products: 'cartProducts',
- checkoutStatus: 'checkoutStatus'
- }),
- total () {
- return this.products.reduce((total, p) => {
- return total + p.price * p.quantity
- }, 0)
- }
+ checkoutStatus: 'checkoutStatus',
+ total: 'cartTotalPrice'
+ })
},
methods: {
checkout (products) {
diff --git a/examples/shopping-cart/components/ProductList.vue b/examples/shopping-cart/components/ProductList.vue
index a3b1a67ef..288ed3d82 100644
--- a/examples/shopping-cart/components/ProductList.vue
+++ b/examples/shopping-cart/components/ProductList.vue
@@ -1,11 +1,11 @@
- -
- {{ p.title }} - {{ p.price | currency }}
+
-
+ {{ product.title }} - {{ product.price | currency }}
diff --git a/examples/shopping-cart/store/getters.js b/examples/shopping-cart/store/getters.js
deleted file mode 100644
index eb2c092d0..000000000
--- a/examples/shopping-cart/store/getters.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const cartProducts = state => {
- return state.cart.added.map(({ id, quantity }) => {
- const product = state.products.all.find(p => p.id === id)
- return {
- title: product.title,
- price: product.price,
- quantity
- }
- })
-}
diff --git a/examples/shopping-cart/store/index.js b/examples/shopping-cart/store/index.js
index 538e91f85..d12f4c22b 100644
--- a/examples/shopping-cart/store/index.js
+++ b/examples/shopping-cart/store/index.js
@@ -1,7 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'
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'
@@ -12,7 +11,6 @@ const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
- getters,
modules: {
cart,
products
diff --git a/examples/shopping-cart/store/modules/cart.js b/examples/shopping-cart/store/modules/cart.js
index 3e14eedda..d8e4eba76 100644
--- a/examples/shopping-cart/store/modules/cart.js
+++ b/examples/shopping-cart/store/modules/cart.js
@@ -10,18 +10,41 @@ const state = {
// getters
const getters = {
- checkoutStatus: state => state.checkoutStatus
+ checkoutStatus: state => state.checkoutStatus,
+
+ cartProducts: (state, getters, rootState) => {
+ return state.added.map(({ id, quantity }) => {
+ const product = rootState.products.all.find(product => product.id === id)
+ return {
+ title: product.title,
+ price: product.price,
+ quantity
+ }
+ })
+ },
+
+ cartTotalPrice: (state, getters) => {
+ return getters.cartProducts.reduce((total, product) => {
+ return total + product.price * product.quantity
+ }, 0)
+ }
}
// actions
const actions = {
checkout ({ commit, state }, products) {
const savedCartItems = [...state.added]
- commit(types.CHECKOUT_REQUEST)
+ commit(types.SET_CHECKOUT_STATUS, null)
+ // empty cart
+ commit(types.SET_CART_ITEMS, { items: [] })
shop.buyProducts(
products,
- () => commit(types.CHECKOUT_SUCCESS),
- () => commit(types.CHECKOUT_FAILURE, { savedCartItems })
+ () => commit(types.SET_CHECKOUT_STATUS, 'successful'),
+ () => {
+ commit(types.SET_CHECKOUT_STATUS, 'failed')
+ // rollback to the cart saved before sending the request
+ commit(types.SET_CART_ITEMS, { items: savedCartItems })
+ }
)
}
}
@@ -30,7 +53,7 @@ const actions = {
const mutations = {
[types.ADD_TO_CART] (state, { id }) {
state.checkoutStatus = null
- const record = state.added.find(p => p.id === id)
+ const record = state.added.find(product => product.id === id)
if (!record) {
state.added.push({
id,
@@ -41,20 +64,12 @@ const mutations = {
}
},
- [types.CHECKOUT_REQUEST] (state) {
- // clear cart
- state.added = []
- state.checkoutStatus = null
- },
-
- [types.CHECKOUT_SUCCESS] (state) {
- state.checkoutStatus = 'successful'
+ [types.SET_CART_ITEMS] (state, { items }) {
+ state.added = items
},
- [types.CHECKOUT_FAILURE] (state, { savedCartItems }) {
- // rollback to the cart saved before sending the request
- state.added = savedCartItems
- state.checkoutStatus = 'failed'
+ [types.SET_CHECKOUT_STATUS] (state, status) {
+ state.checkoutStatus = status
}
}
diff --git a/examples/shopping-cart/store/modules/products.js b/examples/shopping-cart/store/modules/products.js
index 18c712d45..ec69788d1 100644
--- a/examples/shopping-cart/store/modules/products.js
+++ b/examples/shopping-cart/store/modules/products.js
@@ -27,7 +27,7 @@ const mutations = {
},
[types.ADD_TO_CART] (state, { id }) {
- state.all.find(p => p.id === id).inventory--
+ state.all.find(product => product.id === id).inventory--
}
}
diff --git a/examples/shopping-cart/store/mutation-types.js b/examples/shopping-cart/store/mutation-types.js
index 6cbabea97..33d263ac1 100644
--- a/examples/shopping-cart/store/mutation-types.js
+++ b/examples/shopping-cart/store/mutation-types.js
@@ -1,5 +1,4 @@
export const ADD_TO_CART = 'ADD_TO_CART'
-export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
-export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
-export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
+export const SET_CART_ITEMS = 'SET_CART_ITEMS'
+export const SET_CHECKOUT_STATUS = 'SET_CHECKOUT_STATUS'
export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'