vue项目购物车功能中vuex的运用

介绍

• 最近在学习做vue的一个购物街商城的一个项目，其中购物车功能用到了vuex的知识，这里做一个回顾，总结下用到的功能，加深一下回顾。
• 首先，由于项目之前的功能没有用到vuex，所以安装vuex

npm install vuex --save

• 然后我们将商品页点击购物车，按钮功能完成了

购物车添加商品功能

// 加入购物车
addToCart() {
    
    
  // 获取购物车需要展示的商品信息
  const product = {
    
    }
  product.image = this.topImages[0]
  product.title = this.goods.title
  product.desc = this.goods.desc
  product.price = this.goods.realPrice
  product.iid = this.iid

  // 将商品添加到购物车中
  // this.$store.commit('addCart', product)
  this.$store.dispatch('addCart', product)
}

• 点击加入购物车按钮会指向上面的addToCart()方法

• 其中定义一个product将需要在购物车页面展示的一些数据记录

• 然后通过$store.dispathch()发送到actions中处理

• 为什么发到actions中处理呢？

  • 首先我们想要完成的功能是：
  • 1.如果是添加过的商品，那么让商品的数量+1。
  • 2.如果是没有添加过的商品，那么让商品添加到购物车。
  • 而mutations唯一的目的就是修改state中的状态，为了mutations中的每个方法尽可能完成的事件比较单一一点。我们将本在actions中定义addCart()方法，将以上功能分成两个发给mutations。

• 我们先看下我们store文件的目录结构：

store文件夹下目录结构

.
├── actions.js
├── getters.js
├── index.js
├── mutation-types.js
└── mutations.js

actions.js文件：

import {
    
    
  ADD_COUNTER,
  ADD_TO_CART
} from './mutation-types'

export default {
    
    
  addCart(context, payload) {
    
    
    // 1.查找之前数组中是否有该商品
    let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)
    // 2.判断是否为oldProduct
    if (oldProduct) {
    
    
      context.commit(ADD_COUNTER, oldProduct)
    } else {
    
    
      payload.count = 1
      // context.cartList.push(payload)
      context.commit(ADD_TO_CART, payload)
    }
  }
}

• 上面是store/actions.js文件
• 我们的state中定义过一个数组，cartList，就相当于购物车中的物品列表，如果是新的商品就把该商品的数量设置为1，并且提交到mutations中的ADD_TO_CART方法中处理，如果是购物车原本就有的商品，就将商品的数量加1就可以了，这个操作也不能在actions中完成，最好也是提交给mutations，所以我们提交到mutation的ADD_COUNTER方法中处理。
• 只有在mutations中修改state的数据才好跟踪和调试。

mutations.js文件：

import {
    
    
  ADD_COUNTER,
  ADD_TO_CART
} from './mutation-types'

export default {
    
    
  // mutations唯一的目的就是修改state中的状态，
  // mutations中的每个方法尽可能完成的事件比较单一一点
  [ADD_COUNTER](state, payload) {
    
    
    payload.count++

  },
  [ADD_TO_CART](state, payload) {
    
    
    state.cartList.push(payload)
  }
}

mutations-type.js文件：

export const ADD_COUNTER = 'add_counter'
export const ADD_TO_CART = 'add_to_cart'

• 上面是/store/mutation.js文件和/store/mutation-type.js文件
• mutation.js中完成两个功能：将旧商品的数量加1以及将新商品加入到购物车
• 新建一个文件mutation-type.js也是vuex官方推荐我们的做法

index.js文件：

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

import mutations from './mutations'
import actions from './actions'
import getters from './getters'

// 安装插件
Vue.use(Vuex)

const state = {
    
    
  cartList: []
}
// 创建Store对象
const store = new Vuex.Store({
    
    
  state,
  mutations,
  actions,
  getters
})

// 挂载Vue实例上
export default store

• 这个文件比较简单，就是安装插件，创建对象并将各个文件导入，然后导出

购物车内商品数量显示

• 现在我们要将购物车内所有商品的数量展示在购物车页面的标题栏中：

• 很简单我们可以直接通过vuex获取到：

• 但是我们更倾向于定义一个computed计算属性：

• 但我们有可能在很多地方都需要这样的计算属性来返回类似：this.$store.state.cartList.length的值
• 所以我们利用vuex的getters

getters.js文件：

export default {
    
    
  cartLength(state) {
    
    
    return state.cartList.length
  }
}

• 这样我们可以通过getters来获取这个值：

• 但是这样纸写的代码似乎也怪麻烦的。。。
• vuex为我们提供了mapGetters辅助函数！可以将 store 中的 getter 映射到局部计算属性

总结

以上就是在我做的项目购物车中所回顾的vuex的一些使用

• 将store文件夹分模块
• 通过actions处理完dispatch给mutations再commit
• 创建mutations-type.js文件保存mutations中的名字
• 通过mapGetters将 store 中的 getter 映射到局部计算属性