用vuex写了一个购物车H5页面的示例代码

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

npm install --save vuex

import store from \'./store\'

new Vue({

 el: \'#app\',

 store, //将store暴露出来

 components: { App },

 template: \'<App/>\'

})

import Vue from \'vue\'

import Vuex from \'vuex\'

import mutations from \'./mutations\'

import actions from \'./actions\'

import getters from \'./getters\'

import shop from \'./modules/shop\'

Vue.use(Vuex)

const state = {

 goods: [

  {

   id: \'0\',

   name: \'vivo-X20Plus屏幕指纹版\',

   hint: \'逆光也清晰，照亮你的美\',

   price: 3596.00,

   num: 0,

   img: require(\'../assets/v.jpg\')

  },

  {

   id: \'1\',

   name: \'华为mate10Plus\',

   hint: \'真正的人工智能芯片\',

   price: 4999.00,

   num: 0,

   img: require(\'../assets/h.jpeg\')

  },

  {

   id: \'2\',

   name: \'华为mate10Plus\',

   hint: \'真正的人工智能芯片\',

   price: 4999.00,

   num: 0,

   img: require(\'../assets/v.jpg\')

  }

 ],

 totalPrice: 0.00,

 totalNum: 0

}

export default new Vuex.Store({

 state,

 mutations,

 actions,

 getters,

 modules: {

  shop //shop模块

 }
})

// 使用常量，这是mutation-type.js文件

export const ADD_CART = \'ADD_CART\'

export const REDUCE_CART = \'REDUCE_CART\'

// 这是mutation.js文件

import {

 ADD_CART,

 REDUCE_CART

} from \'./mutation-types.js\'

export default {

 [ADD_CART] (state, id) {

  state.goods[id].num++

  state.totalNum++

  state.totalPrice += state.goods[id].price

  // console.log(state.totalPrice)

 },

 [REDUCE_CART] (state, id) {

  if (state.goods[id].num > 0) {

   state.goods[id].num--

   state.totalNum--

   state.totalPrice -= state.goods[id].price

  }

 }

}

const getters = {

 goods_obj: state => state.goods,

 goods_length: state => state.goods.length

}
export default getters

<template>
 <div class=\"hello\">
  <ul class=\"shop_container\">
   <li v-for=\"item in $store.state.goods\" :key=\"item.id\" class=\"shop_container_li\">

    <div class=\"shop_img\">

     <img :src=\"item.img\" alt=\"\" width=\"100%\" height=\"100%\"/>

    </div>

    <div class=\"shop_detail\">

     <p>{{item.name}}</p>

     <p>{{item.hint}}</p>

     <p>￥{{item.price}}</p>

     <p>

      <span class=\"shop_reduce\" @click=\"reduce_num(item.id)\">-</span>

      <span class=\"shop_num\">{{item.num}}</span>

      <span class=\"shop_add\" @click=\"add_num(item.id)\">+</span>

     </p>

    </div>

   </li>

  </ul>

  <div class=\"foot\">

   <div class=\"total_price\">

    <span>合计：￥{{totalPrice}}</span>

   </div>

   <div class=\"total_num\" :class=\"{payment: totalNum}\">

    <span>去结账：{{totalNum}}</span>

   </div>

  </div>

 </div>

</template>

< >

import {mapState, mapMutations, mapGetters} from \'vuex\'

export default {

 name: \'HelloWorld\',

 data () {

  return {

  }

 },

 created () {

  // console.log(this.goods)

  // console.log(this.goods_obj)

  // console.log(this.goods_length)

  // console.log(this.$store.state.shop) // 模块化 Vuex允许我们将 store 分割成模块（module）每个模块拥有自己的 state、mutation、action、getter、

 },

 computed: {

  ...mapState([

  // 获取state中的数据可以通过mapState辅助函数获取，也可以直接获取 例：this.$store.state.goods

   \'goods\', \'totalPrice\', \'totalNum\'

  ]),

  ...mapGetters([

   \'goods_obj\', \'goods_length\'

  ])

 },

 methods: {

  ...mapMutations([

  // 获取mutation中的方法可以通过mapMutations 辅助函数获取，也可以直接获取。

   \'ADD_CART\'

   // \'REDUCE_CART\'

  ]),

  reduce_num (id) {

   // this.REDUCE_CART(id)

   this.$store.commit(\'REDUCE_CART\', id) //也可以直接获取

  },

  add_num (id) {

   this.ADD_CART(id) //通过mapMutations 辅助函数获取

  }

 }

}
</ >