【vue2项目总结】—— vuex相关

简介: 【vue2项目总结】—— vuex相关

@[toc]

登录页面

存入vuex

1.新建 vuex user 模块 store/modules/user.js

export default {
   
  namespaced: true,//开启命名空间
  state () {
   
    return {
   
      userInfo: {
   
        token: '',
        userId: ''
      },
    }
  },
  mutations: {
   },
  actions: {
   }
}
AI 代码解读

2.挂载到 vuex 上

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
   
  modules: {
   
    user,
  }
})
AI 代码解读

3.提供 mutations

mutations: {
   
  setUserInfo (state, obj) {
   
    state.userInfo = obj
  },
},
AI 代码解读

4.页面中 commit 调用

// 登录按钮(校验 & 提交)
async login () {
   
  if (!this.validFn()) {
   
    return
  }
  ...
  const res = await codeLogin(this.mobile, this.msgCode)
  this.$store.commit('user/setUserInfo', res.data)
  this.$router.push('/')
  this.$toast('登录成功')
}
AI 代码解读

持久化处理

1.新建 utils/storage.js 封装方法

const INFO_KEY = 'hm_shopping_info'

// 获取个人信息
export const getInfo = () => {
   
  const result = localStorage.getItem(INFO_KEY)
  return result ? JSON.parse(result) : {
   
    token: '',
    userId: ''
  }
}

// 设置个人信息
export const setInfo = (info) => {
   
  localStorage.setItem(INFO_KEY, JSON.stringify(info))
}

// 移除个人信息
export const removeInfo = () => {
   
  localStorage.removeItem(INFO_KEY)
}
AI 代码解读

2.vuex user 模块持久化处理

import {
    getInfo, setInfo } from '@/utils/storage'
export default {
   
  namespaced: true,
  state () {
   
    return {
   
      userInfo: getInfo()
    }
  },
  mutations: {
   
    setUserInfo (state, obj) {
   
      state.userInfo = obj
      setInfo(obj)
    }
  },
  actions: {
   }
}
AI 代码解读

购物车

1.新建 modules/cart.js 模块

export default {
   
  namespaced: true,
  state () {
   
    return {
   
      cartList: []
    }
  },
  mutations: {
   
  },
  actions: {
   
  },
  getters: {
   
  }
}
AI 代码解读

2.挂载到 store 上面

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
   
  getters: {
   
    token: state => state.user.userInfo.token
  },
  modules: {
   
    user,
    cart
  }
})
AI 代码解读

3.封装 action 和 mutation

mutations: {
   
  setCartList (state, newList) {
   
    state.cartList = newList
  },
},
actions: {
   
  async getCartAction (context) {
   
    const {
    data } = await getCartList()
    data.list.forEach(item => {
   
      item.isChecked = true
    })
     // 后台返回的数据中,不包含复选框的选中状态,为了实现将来的功能
      // 需要手动维护数据,给每一项,添加一个 isChecked 状态 (标记当前商品是否选中)
    context.commit('setCartList', data.list)
  }
},
AI 代码解读

5.页面中 dispatch 调用

computed: {
   
  isLogin () {
   
    return this.$store.getters.token
  }
},
created () {
   
  if (this.isLogin) {
   
    this.$store.dispatch('cart/getCartAction')
  }
},
AI 代码解读

mapState - 渲染购物车列表

1.将数据映射到页面

import {
    mapState } from 'vuex'

computed: {
   
  ...mapState('cart', ['cartList'])
}
AI 代码解读

2.动态渲染

<!-- 购物车列表 -->
<div class="cart-list">
  <div class="cart-item" v-for="item in cartList" :key="item.goods_id">
    <van-checkbox icon-size="18" :value="item.isChecked"></van-checkbox>
    <div class="show" @click="$router.push(`/prodetail/${item.goods_id}`)">
      <img :src="item.goods.goods_image" alt="">
    </div>
    <div class="info">
      <span class="tit text-ellipsis-2">{
   {
    item.goods.goods_name }}</span>
      <span class="bottom">
        <div class="price">¥ <span>{
   {
    item.goods.goods_price_min }}</span></div>
        <CountBox :value="item.goods_num"></CountBox>
      </span>
    </div>
  </div>
</div>
AI 代码解读

封装 getters - 动态计算展示

1.封装 getters:商品总数 / 选中的商品列表 / 选中的商品总数 / 选中的商品总价

getters: {
   
  cartTotal (state) {
   
    return state.cartList.reduce((sum, item, index) => sum + item.goods_num, 0)
  },
  selCartList (state) {
   
    return state.cartList.filter(item => item.isChecked)
  },
  selCount (state, getters) {
   
    return getters.selCartList.reduce((sum, item, index) => sum + item.goods_num, 0)
  },
  selPrice (state, getters) {
   
    return getters.selCartList.reduce((sum, item, index) => {
   
      return sum + item.goods_num * item.goods.goods_price_min
    }, 0).toFixed(2)
  }
}
AI 代码解读

全选反选功能

1.全选 getters

getters: {
   
  isAllChecked (state) {
   
    return state.cartList.every(item => item.isChecked)
  }
}

...mapGetters('cart', ['isAllChecked']),

<div class="all-check">
  <van-checkbox :value="isAllChecked" icon-size="18"></van-checkbox>
  全选
</div>
AI 代码解读

2.点击小选,修改状态

<van-checkbox @click="toggleCheck(item.goods_id)" ...></van-checkbox>

toggleCheck (goodsId) {
   
  this.$store.commit('cart/toggleCheck', goodsId)
},

mutations: {
   
  toggleCheck (state, goodsId) {
   
    const goods = state.cartList.find(item => item.goods_id === goodsId)
    goods.isChecked = !goods.isChecked
  },
}
AI 代码解读

3.点击全选,重置状态

<div @click="toggleAllCheck" class="all-check">
  <van-checkbox :value="isAllChecked" icon-size="18"></van-checkbox>
  全选
</div>

toggleAllCheck () {
   
  this.$store.commit('cart/toggleAllCheck', !this.isAllChecked)
},

mutations: {
   
  toggleAllCheck (state, flag) {
   
    state.cartList.forEach(item => {
   
      item.isChecked = flag
    })
  },
}
AI 代码解读
目录
打赏
0
0
0
0
6
分享
相关文章
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
181 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
89 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
83 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
66 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
82 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
329 2
|
5月前
|
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
60 3
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
79 12
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
219 1
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等