8000 port shopping cart example · vuejs/v2.vuejs.org@7775e5c · GitHub
[go: up one dir, main page]
Skip to content

Commit 7775e5c

Browse files
yyx990803yyx990803
committed
port shopping cart example
1 parent a77f431 commit 7775e5c

File tree

8 files changed

+49
-51
lines changed

8 files changed

+49
-51
lines changed

‎examples/shopping-cart/components/Cart.vue

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,24 @@
1414
</template>
1515

1616
<script>
17-
import { checkout } from '../vuex/actions'
18-
import { cartProducts } from '../vuex/getters'
17+
import { mapGetters } from 'vuex'
1918
2019
export default {
21-
vuex: {
22-
getters: {
23-
products: cartProducts,
24-
checkoutStatus: ({ cart }) => cart.lastCheckout
25-
},
26-
actions: {
27-
checkout
28-
}
29-
},
3020
computed: {
21+
...mapGetters({
22+
products: 'cartProducts',
23+
checkoutStatus: 'checkoutStatus'
24+
}),
3125
total () {
3226
return this.products.reduce((total, p) => {
3327
return total + p.price * p.quantity
3428
}, 0)
3529
}
30+
},
31+
methods: {
32+
checkout (products) {
33+
this.$store.call('checkout', products)
34+
}
3635
}
3736
}
3837
</script>

‎examples/shopping-cart/components/ProductList.vue

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,17 @@
1313
</template>
1414

1515
<script>
16-
import { getAllProducts, addToCart } from '../vuex/actions'
16+
import { mapGetters, mapActions } from 'vuex'
1717
1818
export default {
19-
vuex: {
20-
getters: {
21-
products: ({ products }) => products.all
22-
},
23-
actions: {
24-
getAllProducts,
25-
addToCart
26-
}
27-
},
19+
computed: mapGetters({
20+
products: 'allProducts'
21+
}),
22+
methods: mapActions([
23+
'addToCart'
24+
]),
2825
created () {
29-
this.getAllProducts()
26+
this.$store.call('getAllProducts')
3027
}
3128
}
3229
</script>

‎examples/shopping-cart/vuex/actions.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import * as types from './mutation-types'
33

44
export const addToCart = ({ dispatch }, product) => {
55
if (product.inventory > 0) {
6-
dispatch(types.ADD_TO_CART, product.id)
6+
dispatch(types.ADD_TO_CART, {
7+
id: product.id
8+
})
79
}
810
}
911

@@ -13,12 +15,12 @@ export const checkout = ({ dispatch, state }, products) => {
1315
shop.buyProducts(
1416
products,
1517
() => dispatch(types.CHECKOUT_SUCCESS),
16-
() => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
18+
() => dispatch(types.CHECKOUT_FAILURE, { savedCartItems })
1719
)
1820
}
1921

2022
export const getAllProducts = ({ dispatch }) => {
2123
shop.getProducts(products => {
22-
dispatch(types.RECEIVE_PRODUCTS, products)
24+
dispatch(types.RECEIVE_PRODUCTS, { products })
2325
})
2426
}

‎examples/shopping-cart/vuex/getters.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
export const checkoutStatus = state => state.cart.checkoutStatus
2+
3+
export const allProducts = state => state.products.all
4+
15
export const cartProducts = state => {
26
return state.cart.added.map(({ id, quantity }) => {
37
const product = state.products.all.find(p => p.id === id)

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

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,41 @@
1-
import {
2-
ADD_TO_CART,
3-
CHECKOUT_REQUEST,
4-
CHECKOUT_SUCCESS,
5-
CHECKOUT_FAILURE
6-
} from '../mutation-types'
1+
import * as types from '../mutation-types'
72

83
// initial state
94
// shape: [{ id, quantity }]
105
const state = {
116
added: [],
12-
lastCheckout: null
7+
checkoutStatus: null
138
}
149

1510
// mutations
1611
const mutations = {
17-
[ADD_TO_CART] (state, productId) {
12+
[types.ADD_TO_CART] (state, { id }) {
1813
state.lastCheckout = null
19-
const record = state.added.find(p => p.id === productId)
14+
const record = state.added.find(p => p.id === id)
2015
if (!record) {
2116
state.added.push({
22-
id: productId,
17+
id,
2318
quantity: 1
2419
})
2520
} else {
2621
record.quantity++
2722
}
2823
},
2924

30-
[CHECKOUT_REQUEST] (state) {
25+
[types.CHECKOUT_REQUEST] (state) {
3126
// clear cart
3227
state.added = []
33-
state.lastCheckout = null
28+
state.checkoutStatus = null
3429
},
3530

36-
[CHECKOUT_SUCCESS] (state) {
37-
state.lastCheckout = 'successful'
31+
[types.CHECKOUT_SUCCESS] (state) {
32+
state.checkoutStatus = 'successful'
3833
},
3934

40-
[CHECKOUT_FAILURE] (state, savedCartItems) {
35+
[types.CHECKOUT_FAILURE] (state, { savedCartItems }) {
4136
// rollback to the cart saved before sending the request
4237
state.added = savedCartItems
43-
state.lastCheckout = 'failed'
38+
state.checkoutStatus = 'failed'
4439
}
4540
}
4641

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import {
2-
RECEIVE_PRODUCTS,
3-
ADD_TO_CART
4-
} from '../mutation-types'
1+
import * as types from '../mutation-types'
52

63
// initial state
74
const state = {
@@ -10,12 +7,12 @@ const state = {
107

118
// mutations
129
const mutations = {
13-
[RECEIVE_PRODUCTS] (state, products) {
10+
[types.RECEIVE_PRODUCTS] (state, { products }) {
1411
state.all = products
1512
},
1613

17-
[ADD_TO_CART] (state, productId) {
18-
state.all.find(p => p.id === productId).inventory--
14+
[types.ADD_TO_CART] (state, { id }) {
15+
state.all.find(p => p.id === id).inventory--
1916
}
2017
}
2118

‎examples/shopping-cart/vuex/store.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import Vue from 'vue'
22
import Vuex from '../../../src'
3+
import * as actions from './actions'
4+
import * as getters from './getters'
35
import cart from './modules/cart'
46
import products from './modules/products'
57
import createLogger from '../../../src/plugins/logger'
68

79
Vue.use(Vuex)
8-
Vue.config.debug = true
910

1011
const debug = process.env.NODE_ENV !== 'production'
1112

1213
export default new Vuex.Store({
14+
actions,
15+
getters,
1316
modules: {
1417
cart,
1518
products

‎src/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ class Store {
8181

8282
// set state
8383
if (!isRoot && !hot) {
84-
const parentState = getNestedState(this.state, path.slice(-1))
84+
const parentState = getNestedState(this.state, path.slice(0, -1))
85+
if (!parentState) debugger
8586
const moduleName = path[path.length - 1]
8687
Vue.set(parentState, moduleName, state || {})
8788
}
@@ -257,7 +258,7 @@ function extractModuleGetters (getters = {}, modules = {}, path = []) {
257258
}
258259

259260
function enableStrictMode (store) {
260 5283 -
store._vm.watch('state', () => {
261+
store._vm.$watch('state', () => {
261262
if (!store._dispatching) {
262263
throw new Error(
263264
'[vuex] Do not mutate vuex store state outside mutation handlers.'

0 commit comments

Comments
 (0)
0