ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Vuex 项目购物车实战

2022-02-23 13:30:18  阅读：199  来源： 互联网

标签：实战 .. carts cart 购物车 state components import Vuex


原理介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

一个状态管理应用一般包含以下几个部分：

  • state，存储数据源，就是data中的数据
  • getter，获取store属性方法
  • mutations, 更改 Vuex 的 store 中的状态的唯一方法是提交 mutations
  • view，以声明方式将state映射到视图，就是HTML模板。
  • actions，响应在view上的用户输入导致的状态变化，就是用户触发的修改data中数据的方法。
  • modules，模块化

注意：当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

  • 多个视图依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
  • 来自不同视图的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

为了解决这个问题，可以把组件共享的状态抽取出来，以一个全局共享的方式管理，这就是Vuex。这样无论在哪个组件中，都能获取公共的状态或者触发行为！

项目实战

1、先看静态页面，如下图：
请添加图片描述

当购物车商品数量进行增减操作的话，在当前页面下单个商品的总金额和底下的总件数及总价都会同时发生变化，这样我们就可以封装Vuex。

在views 视图文件夹中创建 cart/Home.vue 组件，把购物车静态页的html代码复制过去。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>长乐小卖部</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" href="assets/css/common.css">
</head>
<body>
<div id="wrapper">
  <div class="cart-index">
    <div class="cart-index-wrap">
      <div class="cart-list">
        <ul>
          <li class="item">
            <div class="ui-box">
              <div class="imgProduct"><a href="/1/#/product/view?product_id=1153200008"><img
                src="https://images.canon4ever.com/20160413140611_68818.jpg"></a></div>
              <div class="info ui-box-flex">
                <div class="name">
                  <span>长乐未央路由器 mini 白色</span>
                </div>
                <div class="price">
                  <p>
                    <span>售价：</span><span>799元</span>
                    <span>合计：</span><span>799元</span>
                  </p>
                </div>
                <div class="num">
                  <div class="xm-input-number">
                    <div class="input-sub"></div>
                    <div class="input-num"><span>1</span></div>
                    <div class="input-add active"></div>
                  </div>
                  <div class="delete">
                    <a href="javascript:;">
                      <span class="icon-iconfontshanchu"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="append"></div>
          </li>
          <li class="item">
            <div class="ui-box">
              <div class="imgProduct"><a href="/1/#/product/view?product_id=1141700025"><img
                src="https://images.canon4ever.com/20160413140611_68818.jpg"></a></div>
              <div class="info ui-box-flex">
                <div class="name">
                  <span>长乐未央路由器 mini 白色</span>
                </div>
                <div class="price">
                  <p>
                    <span>售价：</span><span>129元</span>
                    <span>合计：</span><span>129元</span>
                  </p>
                  <div class="tip">
                    <span style="display: none;">请于2016/05/10 22:59前下单，逾期将失效。</span>
                  </div>
                </div>
                <div class="num">
                  <div class="xm-input-number">
                    <div class="input-sub"></div>
                    <div class="input-num"><span>1</span></div>
                    <div class="input-add active"></div>
                  </div>
                  <div class="delete">
                    <a href="javascript:;">
                      <span class="icon-iconfontshanchu"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="append"></div>
          </li>
        </ul>
      </div>
      <div class="pointBox">
        <div class="point" style="display: none;"><span class="act act_special">包邮</span><span></span></div>
        <div class="point">
          <p>温馨提示：产品是否购买成功，以最终下单为准，请尽快结算</p>
        </div>
      </div>

      <!-- Navbar -->
      <div class="bottom-submit ui-box">
        <div class="price"><span>共2件 金额：</span><br><strong>928</strong><span>元</span></div>
        <div class="btn"><a class="ui-button ui-button-disable"
                            href="#"><span>继续购物</span></a></div>
        <div class="btn"><a class="ui-button"
                            href="#"><span>去结算</span></a></div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

2、创建store状态管理模块

在 store 文件夹里面新建modules文件夹，里面继续创建carts.js 文件，写上基础格式：

// 存储数据，类似 script 里面的 data
const state = () => ({
  all: [],  // 定义 all 数组用于存储购物车所有商品数据
  total: {}  // 定义 total 对象用于存储购物车总件数、总金额
});

// getters
const getters = {};  // 用于获取数据

// 异步请求
const actions = {}; // 异步读取接口

// 更改状态
const mutations = {} // 把接口拿到的数据提交给 mutations 中定义的方法，最后把数据存储到 state 中

由于我们创建的是扩展文件 carts.js，要让这个store生效，需在 store/index.js 中引入carts.js 文件。

在 store/index.js 中添加如下带注释的代码代码：

import Vue from "vue";
import Vuex from "vuex";
import carts from "./modules/carts";  // 引入 carts.js 

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    carts    // 注册模块。原有的getters、actions都分开写到 carts.js 中了，所以这里的直接删掉
  }
});

3、拆分静态组件

在 src/components 中新建 cart 文件夹，根据上面的静态页html代码，我们在里面创建 4 个组件

List.vue 中：

<template>
  <div class="cart-list">
    <ul>
      <li class="item">
        <div class="ui-box">
          <div class="imgProduct"><a href="/1/#/product/view?product_id=1153200008"><img
            src="https://images.canon4ever.com/20160413140611_68818.jpg"></a></div>
          <div class="info ui-box-flex">
            <div class="name">
              <span>长乐未央路由器 mini 白色</span>
            </div>
            <div class="price">
              <p>
                <span>售价：</span><span>799元</span>
                <span>合计：</span><span>799元</span>
              </p>
              <div class="tip">
                <span style="display: none;">请于2016/04/11 00:58前下单，逾期将失效。</span>
              </div>
            </div>
            <div class="num">
              <div class="xm-input-number">
                <div class="input-sub"></div>
                <div class="input-num"><span>1</span></div>
                <div class="input-add active"></div>
              </div>
              <div class="delete">
                <a href="javascript:;">
                  <span class="icon-iconfontshanchu"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="append"></div>
      </li>
      <li class="item">
        <div class="ui-box">
          <div class="imgProduct"><a href="/1/#/product/view?product_id=1141700025"><img
            src="https://images.canon4ever.com/20160413140611_68818.jpg"></a></div>
          <div class="info ui-box-flex">
            <div class="name">
              <span>长乐未央路由器 mini 白色</span>
            </div>
            <div class="price">
              <p>
                <span>售价：</span><span>129元</span>
                <span>合计：</span><span>129元</span>
              </p>
            </div>
            <div class="num">
              <div class="xm-input-number">
                <div class="input-sub"></div>
                <div class="input-num"><span>1</span></div>
                <div class="input-add active"></div>
              </div>
              <div class="delete">
                <a href="javascript:;">
                  <span class="icon-iconfontshanchu"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="append"></div>
      </li>
    </ul>
  </div>

Total.vue 中：

<template>
  <div class="bottom-submit ui-box">
    <div class="price"><span>共2件 金额：</span><br><strong>928</strong><span>元</span></div>
    <div class="btn"><a class="ui-button ui-button-disable"
                        href="#"><span>继续购物</span></a></div>
    <div class="btn"><a class="ui-button"
                        href="#"><span>去结算</span></a></div>
  </div>
</template>

Info.vue 中

<div class="pointBox">
  <div class="point" style="display: none;"><span class="act act_special">包邮</span><span></span></div>
  <div class="point">
    <p>温馨提示：产品是否购买成功，以最终下单为准，请尽快结算</p>
  </div>
</div>

NoCart.vue 中

<template>
  <div class="cart-index">
    <div class="cart-index-wrap">
      <div class="empt">
        <div class="b3">
          <a href="#" class="ui-button ui-button-disable">
            <span>全部商品</span>
          </a>
          <a href="#" class="ui-button">
            <span>精选商品</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

最后在views/cart/Home.vue 中引入并注册上述组件

<template>
  <div id="wrapper">
    <div class="cart-index">
      <NoCarts v-if="carts.length == 0"/>   <!-- 当购物车为空时加载空购物车组件 -->

      <div class="cart-index-wrap" v-else>   <!-- 当购物车有商品时加载购物车列表组件 -->
        <List/>
        <Info/>
        <Total/>
      </div>
    </div>
  </div>
</template>

<script>
  import NoCarts from "@/components/carts/NoCarts";
  import List from "@/components/carts/List";
  import Total from "@/components/carts/Total";
  import Info from "../../components/cart/Info";

  export default {
      components: {
      NoCarts,
      List,
      Total,
      Info
  },
  data(){
      return {
        carts:[]
      }
  },
  created() {
    this.initCart()
  },
  methods:{
      async initCart(){
          // 这里读取购物车首页的接口，拿到数据并赋值给 data
          const res = await request.get("/carts");
          this.carts = res.data
      }
  }
};
</script>

4、读取数据

在 store/modules/carts.js 中：

import request from "../../utils/request";  // 引入 request 请求

const actions = {
  // 读取购物车接口，获取数据
  async getAllCarts({ commit }) {
    const res = await request.get("/carts");
    // 将获取到的数据，通过commit传给mutation
    commit("setCarts", res.data);  // 这里的 setCarts 是 mutations里面接收数据的方法
  },
};

const mutations = {
  // 通过 mutations 里面的 setCarts 方法把数据载荷(赋值)给上面的 state
  setCarts(state, payload) {
    state.all = payload.carts;
    state.total = payload.total;
  }
};

由于 actions 里面的 commit 不能直接把数据赋值给 data，所以需要使用 mutations 。

接下来修改 views/cart/Home.vue代码如下：

.
.
.

<script>
  import NoCart from "../../components/cart/NoCart";
  import List from "../../components/cart/List";
  import Total from "../../components/cart/Total";
  import Info from "../../components/cart/Info";

  import {mapState} from "vuex";

  export default {
      name: "Home",
      components: {
          NoCart,
          List,
          Total,
          Info
      },
      computed: mapState({
          // 读取state中的数据，并赋值给carts
          carts: (state) => state.carts.all
      }),
      created() {
          // 常规写法，执行action里的方法，读取接口，并设置到state中
          this.$store.dispatch("carts/getAllCarts");
      },
  };
</script>

在 src/components/cart/List.vue 中


<template>
  <div class="cart-list">
    <ul>
      <li class="item" v-for="cart in carts" :key="cart.id">
        <div class="ui-box">
          <div class="imgProduct"><a href="/1/#/product/view?product_id=1153200008"><img
            :src="cart.product.image"></a></div>
          <div class="info ui-box-flex">
            <div class="name">
              <span>{{ cart.product.name }}</span>
            </div>
            <div class="price">
              <p>
                <span>售价：</span><span>{{ cart.product.price }}元</span>
                <span>合计：</span><span>{{ Number(cart.product.price * cart.num).toFixed(2) }}元</span>
              </p>
            </div>
            <div class="num">
              <div class="xm-input-number">
                <div class="input-sub"></div>
                <div class="input-num"><span>1</span></div>
                <div class="input-add active"></div>
              </div>
              <div class="delete">
                <a href="javascript:;">
                  <span class="icon-iconfontshanchu"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="append"></div>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapState, mapActions } from "vuex";

  export default {
    computed: mapState({
      // 读取state中的数据，并赋值给carts
      carts: (state) => state.carts.all
    }),
    methods: {
      ...mapActions("carts")  // 执行 action 中的方法获取carts数据，这里mapActions是简化写法
    }
  };
</script>

最后修改 src/components/cart/Toatl.vue 中的代码：

<template>
  <div class="bottom-submit ui-box">
    <div class="price"><span>共 {{ total.num }} 件 金额：</span><br><strong>{{ total.price }}</strong><span>元</span>
    </div>
    <div class="btn"><a class="ui-button ui-button-disable"
                        href="/1/#/product/category"><span>继续购物</span></a></div>
    <div class="btn"><a class="ui-button"
                        href="/1/#/order/checkout?address_type=common"><span>去结算</span></a></div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: mapState({
    // 读取state中的数据，并赋值给carts
    total: (state) => state.carts.total
  }),
};
</script>

5、测试，刷新页面，你会发现购物车数据正常显示。

6、改变数量

把上面的逻辑步骤搞清楚后，就可以完成购物车其他操作。

在 store/modules/carts.js 中的 action 里面增加读取改变数量的接口方法

const actions = {
  .
  .
  .
  // 修改购物车商品数量
  async changeNum({ dispatch }, payload) {
    // 调用接口，修改购物车商品数量，payload是前端传过来的数据
    await request.put(`/carts/${payload.id}`, { type: payload.type });

    // 在action里，执行另一个action用dispatch
    await dispatch("getAllCarts");  // 重新读取数据
  },
};

修改 src/components/cart/List.vue 里面数量加减节点的代码

<template>
  <div class="cart-list">
    <ul>
      <li class="item" v-for="cart in carts" :key="cart.id">
        <div class="ui-box">
          <div class="imgProduct"><a href="/1/#/product/view?product_id=1153200008"><img
            :src="cart.product.image"></a></div>
          <div class="info ui-box-flex">
            <div class="name">
              <span>{{ cart.product.name }}</span>
            </div>
            <div class="price">
              <p>
                <span>售价：</span><span>{{ cart.product.price }}元</span>
                <span>合计：</span><span>{{ Number(cart.product.price * cart.num).toFixed(2) }}元</span>
              </p>
            </div>
            <div class="num">
              <div class="xm-input-number">
                <div class="input-sub" :class="{ active:cart.num > 1}"
                     @click="changeNum({id:cart.id,type:'dec'})"></div>
                <div class="input-num"><span>{{ cart.num }}</span></div>
                <div class="input-add active" @click="changeNum({id:cart.id,type:'inc'})"></div>
              </div>
              <div class="delete">
                <a href="javascript:;">
                  <span class="icon-iconfontshanchu"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="append"></div>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapState, mapActions } from "vuex";

  export default {
    computed: mapState({
      carts: (state) => state.carts.all
    }),
    methods: {
      ...mapActions("carts", [
        "changeNum"  // 增加修改数量方法。注意上面 html 中加减节点传参方式！！！
      ])
    }
  };
</script>

7、删除购物车

在 store/modules/carts.js 中的 action 里面增加删除购物车的接口方法

const actions = {
  .
  .
  .
  // 删除购物车
  async deleteCart({ dispatch }, payload) {
    // 调用接口，删除购物车
    await request.delete(`/carts/${payload.id}`);

    // 在action里，执行另一个action
    await dispatch("getAllCarts");  // 删除成功后重新读取数据
  }
};

修改 src/components/cart/List.vue 里面删除购物车节点的代码

.
.
.
<div class="delete" @click="deleteCart({id:cart.id})">
    <a href="javascript:;">
      <span class="icon-iconfontshanchu"></span>
    </a>
</div>
.
.
.

<script>
  import { mapState, mapActions } from "vuex";

  export default {
    computed: mapState({
      carts: (state) => state.carts.all
    }),
    methods: {
      ...mapActions("carts", [
        "changeNum",
        "deleteCart"  // 增加删除方法
      ])
    }
  };
</script>

最后，我们来修改 views/cart/Home.vue 里面的常规写法代码如下：

.
.
.

<script>
  import NoCart from "../../components/cart/NoCart";
  import List from "../../components/cart/List";
  import Total from "../../components/cart/Total";
  import Info from "../../components/cart/Info";

  import { mapActions, mapState } from "vuex";

  export default {
      name: "Home",
      components: {
          NoCart,
          List,
          Total,
          Info
      },
      computed: mapState({
          // 读取state中的数据，并赋值给carts
          carts: (state) => state.carts.all
      }),
      created() {
          // 常规写法，执行action里的方法，读取接口，并设置到state中
          // this.$store.dispatch("carts/getAllCarts");
          // mapActions简化写法
          this.getAllCarts();
      },
      methods: {
          ...mapActions("carts", [
          "getAllCarts"
          ])
     }
  };
</script>

标签：实战,..,carts,cart,购物车,state,components,import,Vuex
来源： https://blog.csdn.net/huangdj321/article/details/123087759

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有