Vue3 + Vuex4 构建点餐页面

前言

前进！前进！不择手段地前进！！

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

介绍

页面比较简单，算是把 Composition API 过了一下了

• 基于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)
    },
  }
});

页面

FoodItem.vue

SettlementBottom.vue

github notbucai

notbucai blog