Vue3 写项目 技术选型全家桶 移动端购物车+引用动画库+多选删除+筛选

前期回顾     

web前端面试官： 如何让你开发的组件支持 v-model，在往细了说一说https://blog.csdn.net/m0_57904695/article/details/122755395?spm=1001.2014.3001.5501

前言：

• 没有线上网址，所以我模拟了JSON,小伙伴可以根据自己需要，去调节，仅供参考写的很好

简介：

1. 移动端购物车，时间原因我没配置rem， 大家除夕快乐  可以考古之前的，有详细讲打包，各种配置 配置 rem
2. 有编辑、单选、全选、筛选...、手写没有用到Vant库，样子也不是很丑  div+section
3. 引入了动画，需要下载插件，简单、我会一分钟教会你动画
4. 自己手写一个简单动画，可以参考，vue2和vue3动画，出现略微差异，可以自己取看看官方文档，
5. 细分组件，当然如果想要实现复用，是需要传值与props接受，无聊的可以考古之前的 v-model实现 超牛的组件通讯 【硬核】props接受形式

动画库图例：

• 动画库动画库戳点击超多动画可以自己设置，我只是随便选择了一个 

 vue动画下载、引入、使用

cnpm install animate.css --save    yarn add animate.css  // 安装
import 'animate.css'  // 在哪用在哪引入

 
      
  xxx

      
    

手写动画  

 手写动画源码：

项目开始 

• 点击筛选出现红框，再次点击红框消失，这时候点击确定会显示全部数据 

 全选：

• 用到Vuex，进行数据持久化，

 

/*
  位置：子组件components/myFooter.vue
*/

 全选、反选删除

• 注释标在代码里这里就不写了 

/*
   位置：store/index.js
*/
import { createStore, } from 'vuex'
import axios from 'axios'
import persist from 'vuex-persistedstate'
export default createStore({
    state: {
        // 原数据
        data: [],
        vmCkAll: false,
        edit: true,
        //备份数据，用于过滤
        data1: [],
        text: '',


    },
    getters: {
        // num(state) {
        //     // num形参就是后面的数字，e形参就是data每一项 ，
        //     return state.data.reduce((num, e) => num += e.checked && e.num, 0)
        // },
        // priceAll(state) {
        //     return state.data.reduce((num, e) => num += e.checked && e.num * e.price, 0)
        // }

        num(state) {
            return state.data.reduce((num, item) => num += item.checked && item.num, 0)
        },
        priceAll(state) {
            return state.data.reduce((num, item) => num += item.checked && item.num * item.price, 0)
        }
    },
    mutations: {
        changeDate(state, val) {
            // 在mutations 接受actions，第一步请求数据
            if (localStorage.getItem("vuex")) {
                //json数据刷新会重新请求数据，直接赋值list不会实现持久化所以，本地存储有用本地的没有用json
                state.data = JSON.parse(localStorage.getItem("vuex")).data;
                state.data1 = JSON.parse(localStorage.getItem("vuex")).data;
            } else {
                state.data = val;
                state.data1 = val;

            }
        },
        text(state, val) {
            state.text = val
        },

        // 全选逻辑
        ckAll(state, ckAllChecked) {
            // 将全选的状态赋值数据所有的状态，点击全选全部选中
            state.data.forEach(e => e.checked = ckAllChecked)
        },
        //反选逻辑
        ck(state, propsId) {
            console.log(propsId);
            // 循环原数据如果点击传过来的id=vuex的id，则子复选框状态改变
            state.data.forEach(item => item.id == propsId ? item.checked = !item.checked : '')
            state.vmCkAll = state.data.every(item => item.checked)
        },
        // 编辑文字切换
        edit(state) {
            state.edit = !state.edit
        },
        //删除
        del(state) {
            // 全选删除逻辑，就是将没被勾选的赋值原数据
            state.data = state.data.filter(item => !item.checked)
            state.vmCkAll = false
        },
        // 过滤
        okBtn(state) {
            //备份数据，用于过滤
            state.data = state.data1.filter(e => e.name.includes(state.text))
        }
    },
    actions: { //异步
        getData(context) {
            axios.get('/data.json').then(res => {
                // console.log(res);
                context.commit('changeDate', res.data.cartData)
            })
        }
    },

    //plugins插件  persist 持久
    plugins: [persist({
        storage: localStorage, // 定义数据存储的方式 值可以是localStorage 也可以是sessionStorage 或cookies
        reducer(state) {
            return { // 定义需要指定存储的数据
                data: state.data
            }
        }
    })]
})

源码发在资源上了，希望看后对小伙伴与帮助

我是浪哥。
我热爱 vue.js , ElementUI , Element Plus 相关技术栈，我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼。

你可以在csdn关注我：活在风浪里，也可以在快手里找到我：张坤【视频达人】。
希望大家在 2022 变得更强。