Vue3 + Vuex4 构建点餐页面

不才 等级 303 0 0

前言

前进!前进!不择手段地前进!!

Vue3 + Vuex4 构建点餐页面

距离Vue3.0 beta 发布已经过了半个多月了。本来这个东西上个月就应该写了,由于公司上个月赶项目一直没时间。趁着劳动节把这个东西写了一下,也顺便把一些坑过了一下。

介绍

页面比较简单,算是把 Composition API 过了一下了 Vue3 + Vuex4 构建点餐页面

  • 基于Vue3.0 beta 这种页面也比较老套
  • 涉及了 Vue3.0 beta and Vuex4 beta and axios

安装vue3环境

题外话: 听说vite不错,这几天得了解下🤪

  1. 安装(升级)最近的vue-cli
  2. vue create projectName ps: 如果自己不会手动装vuex4或者vue-router4这些库最好是直接安装步骤全部安装(减少一些踩坑的时间成本)
  3. vue add vue-next 这个命令会把项目中的一些依赖自动升级成支持vue3的版本
  4. npm run serve

Composition-API

这里建议直接看文档 https://vue-composition-api-rfc.netlify.app/#summary

🤐直接贴代码了

毕竟思路都差不多,可以的话建议直接看 https://github.com/notbucai/vue3-demo

useScroll

import { ref } from 'vue';
export const useScrollTop = () => {
  const top = ref(0);
  window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop;
    top.value = scrollTop;
  });
  return top;
}

store

import { createStore } from "vuex";

export default createStore({
  state: {
    shopcart: {},
    foodList: [],
  },
  getters: {
    // TODO: 这里的金额计算 是"有问题"的
    // 计算金额与数量
    settlement(state) {

      let allPrice = 0;
      let allCount = 0;

      const shopcart = state.shopcart;
      const foodList = state.foodList;
      // 得到所有食物列表
      const foods = foodList.reduce((previousValue, currentValue) => {
        return previousValue.concat(currentValue.foods);
      }, []);
      // 通过购物车计算金额数量
      Object.keys(shopcart).forEach(key => {
        const count = shopcart[key];
        if (!count) return;
        const food = foods.find(item => item.item_id == key);
        const price = food.specfoods[0].price;
        // 这里只是一种简单的处理浮点金额的方案(不保险),实际上后端直接返回以分为单位的金额会更好,【在后端计算金额一定情况下可能更靠谱】
        allPrice += (price * 10000 * count);
        allCount += count;
      });

      return {
        price: allPrice / 10000,
        count: allCount,
      }
    }
  },
  mutations: {
    ADD_ITEM(state, id) {
      state.shopcart[id] = state.shopcart[id] || 0;
      state.shopcart[id]++;
    },
    SUB_ITEM(state, id) {
      state.shopcart[id] = state.shopcart[id] || 0;
      state.shopcart[id]--;
    },
    SET_FOOD_LIST(state, payload) {
      state.foodList = payload;
    }
  },
  actions: {
    setFoodList({ commit }, payload) {
      commit('SET_FOOD_LIST', payload)
    },
    addItem({ commit }, id) {
      commit('ADD_ITEM', id)
    },
    subItem({ commit }, id) {
      commit('SUB_ITEM', id)
    },
  }
});

页面

<template>
  <div class="Catering">
    <header class="header">
      <div class="shop">
        <div class="shop-pic">
          <img
            src="https://upload.jianshu.io/users/upload_avatars/7759683/995f635d-357b-4539-b008-55aa6b0ac140.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
            alt
          />
        </div>
        <div class="shop-name">一袋米</div>
      </div>
      <div class="navbar">
        <div class="nav-item">点餐</div>
        <div class="nav-item">评价</div>
        <div class="nav-item">商家</div>
      </div>
      <div class="outher-box"></div>
    </header>
    <main class="main">
      <div class="left">
        <div
          class="left-item"
          v-for="(item, index) in list"
          :class="{active:elIndex == index}"
          :key="index"
          @click="srcollTo(index)"
        >{{item.name}}</div>
      </div>
      <div class="right">
        <template v-for="(_item, index) in list">
          <!-- 这里的ref就又点难受了 -->
          <div :key="index" :ref="el=>itemEls[index] = el">
            <food-item :item="_item" />
          </div>
        </template>
      </div>
    <settlement-bottom />
    </main>
  </div>
</template>
<script>
import { watch, ref, onBeforeUpdate, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import { useScrollTop } from '../hooks';
import { getList } from '../ajax/index';
import FoodItem from './components/FoodItem';
import SettlementBottom from './components/SettlementBottom';

export default {
  components: { FoodItem, SettlementBottom },
  setup() {
    // store
    const store = useStore();

    const list = computed(() => store.state.foodList);

    onMounted(async () => {
      // NOTE: 获取数据
      let resList = await getList();
      // 存入store
      store.dispatch('setFoodList', resList);
    });

    // 组节点列表
    const itemEls = ref([]);
    // 当前选中节点
    const elIndex = ref(0);

    // 监听数据
    const scrollTop = useScrollTop([]);

    onBeforeUpdate(() => {
      // 更新时清空
      itemEls.value = [];
    });

    // 监听滚动条变化
    watch(scrollTop, () => {
      let index = 0;
      // 判断距离头部最近的元素 实际上这里是可以缓存高度的
      itemEls.value.forEach((el, i) => {
        // console.log('el=>',el,'val=>', scrollTop.value);
        if (el.offsetTop > scrollTop.value) return;
        index = i;
      });
      // 绑定节点
      elIndex.value = index;
    });

    const srcollTo = index => {
      elIndex.value = index;
      const el = itemEls.value[index];
      const offsetTop = el.offsetTop;
      window.scrollTo(0, offsetTop);
    };

    return {
      list,
      itemEls,
      elIndex,
      srcollTo
    };
  }
};
</script>
<style lang="scss">
......
</style>

FoodItem.vue

<template>
  <div class="FoodItem">
    <div class="food-title">{{item.name}}</div>
    <div class="food-item" v-for="(food) in item.foods" :key="food.item_id">
      <div class="food-pic">
        <img
          src="https://upload.jianshu.io/users/upload_avatars/16175630/e2ee85e5-7cb0-429d-a517-bb1c6f1833e4?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp"
          alt
        />
      </div>
      <div class="food-main">
        <div class="food-info">
          <div class="title">{{food.name}}</div>
          <div class="info">{{food.applicable_quantity_text}}</div>
        </div>
        <div class="money">¥{{food.specfoods[0].price}}</div>
      </div>
      <div class="food-action">
        <div class="action-item minus" v-if="shopcart[food.item_id]" @click="handleMinus(food)">-</div>
        <div class="action-num" v-if="shopcart[food.item_id]">{{shopcart[food.item_id]}}</div>
        <div class="action-item puls" @click="handlePuls(food)">+</div>
      </div>
    </div>
  </div>
</template>
<script>
// import { reactive, unref } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
export default {
  components: {},
  props: {
    item: Object
  },
  setup() {
    // store
    const store = useStore();
    // 购物车
    const shopcart = computed(() => store.state.shopcart);

    const handleChangeCount = (food, type) => {
      const id = food.item_id;
      const actionName = type > 0 ? 'addItem' : 'subItem';
      store.dispatch(actionName, id);
    };

    const handleMinus = food => {
      handleChangeCount(food, -1);
    };
    const handlePuls = food => {
      handleChangeCount(food, 1);
    };

    return {
      shopcart,
      handleMinus,
      handlePuls
    };
  }
};
</script>
<style lang="scss" scoped>
......
</style>

SettlementBottom.vue

<template>
  <div class="SettlementBottom">
    <div class="num_box">x{{settlement.count}}</div>
    <div class="price_box">¥{{settlement.price}}</div>
    <div class="submit_btn" @click="handleSubmit">结算</div>
  </div>
</template>
<script>
import { useStore } from 'vuex';
import { computed } from 'vue';
export default {
  props: {},
  setup() {
    const store = useStore();
    const settlement = computed(() => store.getters.settlement);
    const handleSubmit = () => {
      const sc = store.state.shopcart;
      const shopcart = Object.keys(sc).map(key => ({
        id: key,
        count: sc[key]
      }));

      console.log('shopcart=>', shopcart);
      console.log('如果需要原食物的参数可以直接去state中获取');
    };
    return {
      settlement,
      handleSubmit
    };
  }
};
</script>
<style lang="scss" scoped>
......
</style>

github notbucai

notbucai blog

收藏
评论区

相关推荐

vue 节流、拖拽指令
1、在开发中时长遇到按钮重复点击或者多次点击的情况 比如创建订单或者其他情况,当然也可以通过设置变量开关,禁止状态,这里就分享一个 节流的指令 javascript VUE3好像指令的生命周期和组件的生命周期同步了 //立即执行版本,点击后会执行一次,然后进入定时器 export const throttle { inserted: function
Vue3 的 15 个常用 API
来自公众号:前端印象 本文会频繁地对比Vue2来介绍Vue3,也将对各个API结合代码实例讲解,这既是对自己知识的总结,也希望能帮助到大家 一、前言 大家都知道,现在Vue3的各个版本已经陆续发布了,并且有很多的团队已经着手各个库的开发与Vue2向Vue3的升级,我们当然也不能落后,所以赶紧将你手中的Vue2升级到Vue3,跟着本文一起学
Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?
开始之前 Composition API 可以说是Vue3最大的特点,那么为什么要推出Composition Api,解决了什么问题? 通常使用Vue2开发
舒文:浅谈阿里前端的多样化
2007年,Jeff Atwood 提出了一个著名的观点, 戏谑又似认真地称其为 Atwood's Law(https://blog.codinghorror.com/theprincipleofleastpower/): _any application that can be written in JavaScript, will event
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
Vue3 + Vuex4 构建点餐页面
前言 前进!前进!不择手段地前进!!距离Vue3.0 beta 发布已经过了半个多月了。本来这个东西上个月就应该写了,由于公司上个月赶项目一直没时间。趁着劳动节把这个东西写了一下,也顺便把一些坑过了一下。 介绍页面比较简单,算是把 Composition API 过了一下了 基于Vue3.0 beta 这种页面也比较老套了 涉及了
Google Dart抗衡JavaScript的十大亮点
【IT168 技术】导读:Google是家充满创新力的公司。他们不喜欢Javascript了,于是自己推出了Dart。不负众望,Dart在今年的编程语言排行榜中成了一匹黑马,一经发布便窜到了排行榜107位,次月居然到了63,速度惊人。 根据原文编译的
爬取3万景点,分析十一哪里人从众从人?
作为一名普通上班族,每个星期都在无休止的上班(没准还加班)之中度过。几个月前一直心心念念的可就是这十一的“小长假”(还调班两天)。 朱小五这次爬取分析携程国内150个热点城市的景点数据,简单的分析一下哪些景点比较受欢迎。用来预计分析一下这个十一哪里最可能人从众从人? 让我们来分析一下。 获取数据 首先,我们来明确一下我们想要爬取的数据是哪些,这里
「快速学习系列」我熬夜整理了Vue3.x响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性API reactive作用: 创建一个响应式数据。本质: 传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
「快速学习系列」我熬夜整理了Vue3.x响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性API reactive作用: 创建一个响应式数据。本质: 传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
Vue3 - 响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性API reactive作用: 创建一个响应式数据。本质: 传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
盘点3个可以操作JavaScript的Python库
前言我们都知道Python可以很轻松的实现某些功能,而且还可以编写网页,比如Remi,Pysimplegui,但是操作JavaScript这种浏览器的脚本语言,还是第一次听说,小编也是第一次听说,于是就跟大家脑补这一知识。 一、PyExecJS是一个可以执行JavaScript脚本的Python模块,可以与网页上的JavaScript进行交互,这样就能更加
Vue3 + TypeScript 开发实践总结
前言迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍。<br/在去年年末又把 TypeScript 重新学了一遍,为了上 Vue3 的车,更好的开车。<br/在上家公司4月份时,上级领导分配了一个内部的 党务系统开发 ,这个系统前端是由我一个人来开发,功能和需求也不怎么复杂的一个B 端 系统,直接上的 Vue3 + TypeScript + El