vue添加购物车代码封装

写在vuex的公共数据源里

1，安装vuex，并在main.js引入到Vue实例对象里

2，设置store的index。js文件，并将其传出来

3，创建购物车的store的js模块并建立数据源，并在自己的页面调用

下面就是查重调用的方法，剩下的自己引入方法直接调用就可以了，也可以封装成函数

export default{
// 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据，获取数据源数据，
  state: () => ({
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    cart: [],
  }),

  // 模块的 mutations 方法 共享购物车方法   state是储存商品的数组，goods是添加的商品
  mutations: {
    addToCart(state, goods) {
      // 根据提交的商品的Id，查询购物车中是否存在这件商品
      // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象
      const findResult = state.cart.find((x) => x.goods_id === goods.goods_id)

      if (!findResult) {
        // 如果购物车中没有这件商品，则直接 push
        state.cart.push(goods)
      } else {
        // 如果购物车中有这件商品，则只更新数量即可
        findResult.goods_count++
      }
    },
  },

find（）函数

• 没有改变原始数组的值，将找到的第一个元素返回

  include（）

• includes() 方法用来判断一个数组是否包含一个指定的值，如果包含就返回 true，否则返回false。

• 场景：可以使用include方法进行一些逻辑判断。
  如：用户的状态为可接入（设定值）才能进行网页跳转等等。