用vuex的方法实现购物车业务

一、 购物车的实现原理：

注意：在写购物车之前，我们需要知道vuex里的方法如何使用，若是不太清除方法的使用，可以看我之前的文章，其中有一章是介绍vuex的方法的使用和调用的！

1，首先，我们需要一个json数据，自己写或者找一个就可以。
2. 然后把数据渲染到页面，即为商品列表，在每一个商品后面加上一个加号，代表着点击添加商品就将该商品添加到购物车。
3. 其次，就是购物车内的操作，在此之前需要把数据存储到本地，好在购物车页面渲染点击获取的数据。
4. 最后，就是对数据进行全选，单选，加加减减及总价的操作。

二、购物车的具体操作

1、store文件中的index.js代码（即vuex操作）

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
//引入axios,需要下载
Vue.use(Vuex)

export default new Vuex.Store({
   
  state: {
   
    cartlist: [],//用于商品列表渲染的数据
    cartItem: JSON.parse(localStorage.getItem("carto")) || [],//存储到localStorage（本地存储），的数组
    delchecked: JSON.parse(localStorage.getItem("carto")) || false,
    //同步的全选的状态
    zong:JSON.parse(localStorage.getItem("zong")) ||0,
    //总价
    dan:JSON.parse(localStorage.getItem("dan")) ||0,
    //总件数
  },
  mutations: {
   
  //用于商品列表
    CARTLIST(state, item) {
   
      state.cartlist = item
    },
    //用于本地存储并进行去重操作
    CARTITEM(state, item) {
   
      var flg = false;
      state.cartItem.forEach(e => {
   
        if (e._id === item._id) {
   
          e.count++;
          flg = true;
        }
      });
      if (!flg) {
   
        item.count = 1;
        item.checked = false;
        state.cartItem.push(item)
      }
      localStorage.setItem("carto", JSON.stringify(state.cartItem))
    },
    //判断单选是否全选，同步全选
    ONCHANGE(state, item) {
   
      console.log(state.cartItem[0].checked)
      console.log(item);
      state.cartItem.forEach(e => {
   
        if (e._id === item.id) {
   //判断是否是选中的那个元素
          e.checked = item.checked;
          //改变存储中的checked的状态
        }
      });
      //同步全选状态
      state.delchecked = state.cartItem.every(e => {
   
        return e.checked