• 售前

  • 售后

热门帖子
入门百科

基于vuex实现购物车功能

[复制链接]
见贤思齐380 显示全部楼层 发表于 2021-10-25 19:05:53 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下
先看结果:

代码:
  1. <template>
  2. <div class="Home">
  3. <h1>vuex购物车案例</h1>
  4. <add-from></add-from>
  5. <shop-cart></shop-cart>
  6. </div>
  7. </template>
  8. <script>
  9. import AddFrom from './Add.vue'
  10. import ShopCart from './ShopCart.vue'
  11. // @ is an alias to /src
  12. // import HelloWorld from '@/components/HelloWorld.vue'
  13. export default {
  14. name: 'Home',
  15. components: {
  16. AddFrom,
  17. ShopCart
  18. },
  19. };
  20. </script>
  21. <style>
  22. table {
  23. width: 800px;
  24. margin: 0 auto;
  25. border: 1px solid #ccc;
  26. border-spacing: 0;
  27. }
  28. tbody th,
  29. tbody td {
  30. border: 1px solid #ccc;
  31. text-align: center;
  32. }
  33. h1{
  34. text-align: center;
  35. }
  36. .add{
  37. width: 800px;
  38. margin: 0 auto;
  39. }
  40. </style>
复制代码
父组件
  1. <template>
  2. <div class="add">
  3. <div class="from-group">
  4. <label for="">商品编号</label>
  5. <input type="text" v-model="shop.id" placeholder="请输入商品编号">
  6. </div>
  7. <div class="from-group">
  8. <label for="">商品名称</label>
  9. <input type="text" v-model="shop.name" placeholder="请输入商品名称">
  10. </div>
  11. <div class="from-group">
  12. <label for="">商品价格</label>
  13. <input type="text" v-model="shop.price" placeholder="请输入商品价格">
  14. </div>
  15. <div class="from-group">
  16. <label for="">商品数量</label>
  17. <input type="text" v-model="shop.count" placeholder="请输入商品数量">
  18. </div>
  19. <div class="from-group">
  20. <button @click="add">添加商品</button>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. export default {
  26. name: 'add',
  27. data() {
  28. return {
  29. shop:{}
  30. };
  31. },
  32. methods:{
  33. add(){
  34. this.$store.dispatch("addShopList",this.shop)
  35. this.shop = {
  36. id:"",
  37. name:"",
  38. price:"",
  39. count:""
  40. }
  41. }
  42. }
  43. };
  44. </script>
  45. <style scoped>
  46. .add{
  47. width: 800px;
  48. text-align: center;
  49. }
  50. </style>
复制代码
```bash
  1. <template>
  2. <div class="Shop-Cart">
  3. <table>
  4. <thead border>
  5. <tr>
  6.   <th>商品编号</th>
  7.   <th>商品名称</th>
  8.   <th>商品价格</th>
  9.   <th>商品数量</th>
  10.   <th>小计</th>
  11.   <th>操作</th>
  12. </tr>
  13. </thead>
  14. <tbody v-if="shop.length > 0">
  15. <tr v-for="(i, e) in shop" :key="e">
  16.   <td>{{ i.id }}</td>
  17.   <td>{{ i.name }}</td>
  18.   <td>{{ i.price }}</td>
  19.   <td>
  20.   <button @click="add(e)">+</button>
  21.   <input type="text" v-model="i.count" />
  22.   <button @click="delet(e)">-</button>
  23.   </td>
  24.   <td>¥{{ i.price * i.count }}</td>
  25.   <td><button @click="del(e)">删除</button></td>
  26. </tr>
  27. </tbody>
  28. <tfoot>
  29. <tr>
  30.   <td colspan="6" align="right">总计:{{ total }}</td>
  31.   <button @click="clear">清除购物车</button>
  32. </tr>
  33. </tfoot>
  34. </table>
  35. </div>
  36. </template>
  37. <script>
  38. export default {
  39. name: 'Shop-Cart',
  40. components: {},
  41. data() {
  42. return {};
  43. },
  44. computed: {
  45. shop() {
  46. return this.$store.getters.getlist;
  47. },
  48. total() {
  49. return this.$store.getters.getShopTotal;
  50. }
  51. },
  52. methods: {
  53. del(e) {
  54. // this.$store.dispatch()
  55. this.$store.dispatch('remoteList', e);
  56. },
  57. add(e) {
  58. this.$store.dispatch('addList', e);
  59. },
  60. delet(e) {
  61. this.$store.dispatch('deleteList', e);
  62. },
  63. clear() {
  64. this.$store.dispatch('clearList', []);
  65. }
  66. }
  67. };
  68. </script>
复制代码
vuex组件
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. export default new Vuex.Store({
  5. state: {
  6. list: [{
  7. id: 1,
  8. name: "哇哈哈",
  9. price: 3,
  10. count: 0
  11. },
  12. {
  13. id: 2,
  14. name: "哇哈",
  15. price: 3,
  16. count: 0
  17. }
  18. ]
  19. },
  20. getters: {
  21. //获取购物车数据
  22. getlist(state) {
  23. return state.list
  24. },
  25. //商品的总价
  26. getShopTotal(state,index) {
  27. let result = 0;
  28. state.list.forEach((item, index) => {
  29. result += item.price * item.count
  30. })
  31. return result
  32. },
  33. },
  34. mutations: {
  35. //删除购物车单个数据
  36. remoteList(state,index) {
  37. state.list.splice(index, 1);
  38. console.log("aaa",state)
  39. },
  40. //商品数量增加
  41. addList(state, index) {
  42. state.list[index].count++;
  43. },
  44. //商品数量减少
  45. deleteList(state, index) {
  46. state.list[index].count--;
  47. if(state.list[index].count<=0){
  48. state.list[index].count = 0
  49. return ;
  50. }
  51. },
  52. //清除购物车
  53. clearList(state, arr) {
  54. state.list = arr
  55. },
  56. addShopList(state,shop){
  57. state.list.push(shop)
  58. }
  59. },
  60. //使用actions调用mutations方法
  61. actions: {
  62. remoteList({
  63. commit
  64. }, index) {
  65. commit("remoteList", index)
  66. },
  67. addList({
  68. commit
  69. }, index) {
  70. commit("addList", index)
  71. },
  72. deleteList({
  73. commit
  74. }, index) {
  75. commit("deleteList", index)
  76. },
  77. clearList({
  78. commit
  79. }, arr) {
  80. commit("clearList", arr)
  81. },
  82. addShopList({commit},shop){
  83. commit("addShopList",shop)
  84. }
  85. },
  86. modules: {}
  87. })
复制代码
以上就是本文的全部内容,盼望对大家的学习有所资助,也盼望大家多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作