Permalink
Browse files

Update shopping-cart

shopping-cart Vue2.x 版本升级
  • Loading branch information...
xiaoluoboding committed Apr 29, 2017
1 parent 70e8bd4 commit 6fbb1ee665d3da702681e25bc867eec2df6ee5f2
View
@@ -20,6 +20,7 @@
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-latest": "^6.0.0",
+ "babel-preset-stage-3": "^6.24.1",
"babel-runtime": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
View
@@ -0,0 +1,12 @@
+{
+ "presets": [
+ ["latest", {
+ "es2015": {
+ "modules": false
+ },
+ },
+ ],
+ "stage-3"
+ ],
+ "plugins": ["transform-runtime"]
+}
View
@@ -1,21 +1,9 @@
<script>
import Nav from './components/Nav.vue'
- import store from './vuex/store'
export default {
name: 'App',
- store,
-
- data() {
- return {
- // note: changing this line won't causes changes
- // with hot-reload because the reloaded component
- // preserves its current state and we are modifying
- // its initial state.
- }
- },
-
components: {
'cart-nav': Nav
}
@@ -1,30 +1,26 @@
<script>
- import {
- removeItem
- } from '../vuex/actions'
+ import { mapState, mapActions } from 'vuex'
export default {
name: 'Cart',
- vuex: {
- getters: {
- cart: ({
- index
- }) => index.cart
- },
- actions: {
- removeItem
- }
- },
-
computed: {
- 'totalPrice': function() {
+ ...mapState({
+ cart: state => state.cart.cart
+ }),
+ totalPrice() {
let totalPrice = 0
for (let i in this.cart) {
totalPrice += this.cart[i].price
}
return totalPrice
}
+ },
+
+ methods: {
+ ...mapActions([
+ 'removeItem',
+ ]),
}
}
</script>
@@ -1,25 +1,21 @@
<script>
- import { changePrice, changeStyle, addItem } from '../vuex/actions'
+ import { mapState, mapActions } from 'vuex'
export default {
name: 'Index',
- data() {
- return {
- activeStyle: '',
- type: ''
- }
+ computed: {
+ ...mapState({
+ iPhone6S: state => state.cart.iPhone6S
+ }),
},
- vuex: {
- getters: {
- iPhone6S: ({ index }) => index.iPhone6S
- },
- actions: {
- changePrice,
- changeStyle,
- addItem
- }
+ methods: {
+ ...mapActions([
+ 'changePrice',
+ 'changeStyle',
+ 'addItem',
+ ]),
}
}
</script>
@@ -47,25 +43,27 @@
<dt>外观:</dt>
<dd>
<ul>
- <li v-for="styleUrl in iPhone6S.style"
- @click="changeStyle($key, styleUrl)"
- :class="{active: iPhone6S.activeStyleUrl == styleUrl}"><span v-text="$key"></span></li>
+ <li v-for="(value, key) in iPhone6S.style"
+ @click="changeStyle(key)"
+ :class="{active: iPhone6S.activeStyleUrl == value}">
+ <span v-text="key"></span>
+ </li>
</ul>
</dd>
</dl>
<dl class="option dl-horizontal">
<dt>存储容量:</dt>
<dd>
<ul>
- <li v-for="price in iPhone6S.storage"
- @click="changePrice($key, price)"
- :class="{active: iPhone6S.price == price}"><span v-text="$key"></span></li>
+ <li v-for="(value, key) in iPhone6S.storage"
+ @click="changePrice(key)"
+ :class="{active: iPhone6S.price == value}"><span v-text="key"></span></li>
</ul>
</dd>
</dl>
</div>
<hr>
- <button class="btn btn-danger btn-block" @click="addItem()" :disabled="iPhone6S.isSelected">
+ <button class="btn btn-danger btn-block" @click="addItem" :disabled="iPhone6S.isSelected">
<span class="glyphicon glyphicon-shopping-cart"></span> 加入购物车
</button>
</div>
@@ -1,15 +1,14 @@
<script>
- export default {
- name: 'nav',
+ import { mapState } from 'vuex'
- vuex: {
- getters: {
- cart: ({ index }) => index.cart
- }
- },
+ export default {
+ name: 'Nav',
computed: {
- 'totalItem': function() {
+ ...mapState({
+ cart: state => state.cart.cart
+ }),
+ totalItem() {
return this.cart.length
}
}
@@ -20,13 +19,14 @@
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
- <a class="navbar-brand" href="#" v-link="{ path: '/' }">Shopping Cart</a>
+ <router-link class="navbar-brand" :to="{ path: '/' }">Shopping Cart</router-link>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
- <li v-link="{ path: '/index', activeClass: 'active' }"><a href="#!"> iPhone 6S <span class="sr-only">(current)</span></a></li>
- <li v-link="{ path: '/cart', activeClass: 'active' }"><a href="#!"> 购物车 <span class="badge text-danger" v-text="totalItem" v-if="totalItem"></span></a></li>
+
+ <li><router-link :to="{ path: '/index', activeClass: 'active' }">iPhone 6S <span class="sr-only">(current)</span></router-link></li>
+ <li><router-link :to="{ path: '/cart', activeClass: 'active' }">购物车 <span class="badge text-danger" v-text="totalItem" v-if="totalItem"></span></router-link></li>
</ul>
</div>
<!-- /.navbar-collapse -->
View
@@ -1,26 +1,23 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
-import ConfigRouter from './router'
+import routes from './routes'
import App from './App.vue'
+import store from './vuex/store'
-Vue.config.devtools = true
+// Vue.config.devtools = true
Vue.use(VueRouter)
-// Set up a new router
-var router = new VueRouter()
-
-ConfigRouter(router)
-
-// For every new route scroll to the top of the page
-router.beforeEach(function() {
- window.scrollTo(0, 0)
+const router = new VueRouter({
+ scrollBehavior: () => ({ y: 0 }),
+ routes
})
-// If no route is matched redirect home
-router.redirect({
- '*': '/'
+// Start up our app
+const app = new Vue({
+ router,
+ store,
+ ...App
})
-// Start up our app
-router.start(App, '#root')
+app.$mount("#root")
@@ -1,14 +0,0 @@
-// Route config
-export default function(router) {
- router.map({
- '/': {
- component: require("./components/Index.vue")
- },
- '/index': {
- component: require("./components/Index.vue")
- },
- '/cart': {
- component: require("./components/Cart.vue")
- }
- })
-}
@@ -0,0 +1,24 @@
+import Index from './components/Index.vue'
+import Cart from './components/Cart.vue'
+// Route config
+export default [
+ {
+ path: '/',
+ name: 'Home',
+ component: Index
+ },
+ {
+ path: '/index',
+ name: 'Index',
+ component: Index
+ },
+ {
+ path: '/cart',
+ name: 'Cart',
+ component: Cart
+ },
+ {
+ path: '*',
+ redirect: '/'
+ }
+]
@@ -1,14 +1,11 @@
-// import * as types from './mutation-types'
-// export const setToken = ({ dispatch }, token) => {
-// dispatch(types.SET_TOKEN, token)
-// }
+import * as types from './mutation-types'
-// index actions
-export const changePrice = makeAction('CHANGE_PRICE')
-export const changeStyle = makeAction('CHANGE_STYLE')
-export const addItem = makeAction('ADD_ITEM')
-export const removeItem = makeAction('REMOVE_ITEM')
-
-function makeAction (type) {
- return ({ dispatch }, ...args) => dispatch(type, ...args)
+const makeAction = (type) => {
+ return ({ commit }, ...args) => commit(type, ...args)
}
+
+// index actions
+export const changePrice = makeAction(types.CHANGE_PRICE)
+export const changeStyle = makeAction(types.CHANGE_STYLE)
+export const addItem = makeAction(types.ADD_ITEM)
+export const removeItem = makeAction(types.REMOVE_ITEM)
@@ -0,0 +1,63 @@
+// vuex/modules/index.js
+import {
+ CHANGE_STYLE,
+ CHANGE_PRICE,
+ ADD_ITEM,
+ REMOVE_ITEM
+} from '../mutation-types'
+
+// 该模块的初始状态
+const state = {
+ iPhone6S: {
+ name: 'Apple/苹果 iPhone 6S',
+ desc: '3D Touch、1200万像素照片、4k视频,强大功能于一身。',
+ price: '5288 - 6888',
+ isSelected: true,
+ style: {
+ '银色': 'http://o8yu724qs.bkt.clouddn.com/iphone6s-silver-select-2015.png',
+ '深空灰色': 'http://o8yu724qs.bkt.clouddn.com/iphone6s-gray-select-2015.png',
+ '金色': 'http://o8yu724qs.bkt.clouddn.com/iphone6s-gold-select-2015.png',
+ '玫瑰金色': 'http://o8yu724qs.bkt.clouddn.com/iphone6s-rosegold-select-2015.png'
+ },
+ activeStyleUrl: 'http://o8yu724qs.bkt.clouddn.com/iphone6s-silver-select-2015.png',
+ storage: {
+ '16GB': 5288,
+ '64GB': 6088,
+ '128GB': 6888
+ }
+ },
+ cart: []
+}
+
+// 相关的 mutations
+const mutations = {
+ [CHANGE_STYLE] (state, styleKey) {
+ const { style } = state.iPhone6S
+ state.iPhone6S.activeStyle = styleKey
+ state.iPhone6S.activeStyleUrl = style[styleKey]
+ },
+ [CHANGE_PRICE] (state, storageKey) {
+ const { storage } = state.iPhone6S
+ state.iPhone6S.activeStorage = storageKey
+ state.iPhone6S.price = storage[storageKey]
+ state.iPhone6S.isSelected = false
+ },
+ [ADD_ITEM] (state) {
+ const activeStyle = state.iPhone6S.activeStyle === undefined ? '银色' : state.iPhone6S.activeStyle
+ const type = activeStyle + '' + state.iPhone6S.activeStorage
+ const cartInfo = {
+ type,
+ count: 1,
+ price: state.iPhone6S.price
+ }
+ state.cart.push(cartInfo)
+ },
+ [REMOVE_ITEM] (state, cartInfo) {
+ state.cart.splice(state.cart.indexOf(cartInfo), 1)
+ }
+}
+
+export default {
+ state,
+ mutations
+}
Oops, something went wrong.

0 comments on commit 6fbb1ee

Please sign in to comment.