vue 全家桶(七)vuex 状态管理(实现购物车)

Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题,将开发者的精力集中于数据的更新而不是数据在组件之间的传递上。本文以购物车为例,对概念没有过多阐述,建议先浏览官网:https://vuex.vuejs.org/一. 预期效果   - 【页面】商品列表组件、购物车列表组件、商品结算组件   - 【功能】将商品加入购物车,更新购物车列表   - ...
摘要由CSDN通过智能技术生成

Vuex 解决了多个视图依赖于同一状态来自不同视图的行为需要变更同一状态的问题,将开发者的精力集中于数据的更新而不是数据在组件之间的传递上。

本文以购物车为例,对概念没有过多阐述,建议先浏览官网:https://vuex.vuejs.org/

一. 预期效果

   - 【页面】商品列表组件、购物车列表组件、商品结算组件

   - 【功能】将商品加入购物车,更新购物车列表

   - 【功能】增减商品时,库存、总数、总价变化

  vuex-demo

二. 具体实现

  1.文件结构

store
    ├── index.js             # 导出 store 的地方
    ├── state.js             # 根级别的 state
    ├── getters.js           # 二次包装state数据
    ├── actions.js           # 根级别的 action
    ├── mutations.js         # 根级别的 mutation
    ├── mutation-types.js    # 所有 mutation 的常量映射表

2.安装

npm install vuex --save

3.在src目录下新建store/index.js,代码如下:

import Vue from 'vue';
import Vuex from 'vuex';

import actions from '@/store/actions.js';
import getters from '@/store/getters.js';
import mutations from '@/store/mutations.js';
import state from '@/store/states.js';

Vue.use(Vuex);


export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
})

4.在main.js文件中引入

import router from './router'
import store from './store/index'

new Vue({
  el: '#app',
  router,
  util,
  store,
  components: {App},
  template: '<App/>'
})

   5.页面搭建及组件实现(注:这里的组件都是全局注册的,可参考:https://blog.csdn.net/try_try_try/article/details/85264175

   - 数据准备

goodsData: [
          { 'id': 1, 'url':imgTmp, 'name': "美的洗碗机", 'price': 2000,'inventory':5,'num':1 },
          { 'id': 2, 'url':imgTmp, 'name': "美的豆浆机", 'price': 1000,'inventory':100,'num':1 },
          { 'id': 3, 'url':imgTmp, 'name': "美的微波炉", 'price': 1500,'inventory':80,'num':1 }
        ]

  - 商品列表项组件(goodsItem)

<template>
  <div class="goods_item">

    <div class="goods_item_content">

      <div class="goods_item_radio">
        <img style="width:60px;height:60px" :src="good.url" alt="">
      </div>

      <div class="goods_item_title">
        <div class="goods_item_name" >{
  {good.name}}</div>
        <div class="goods_item_name" style="color: gray" >库存: {
  {good.inventory}}</div>
      
  • 7
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值