用vuex写了一个购物车H5页面的示例代码

下面就是使用Vuex写购物车H5页面的攻略，具体步骤如下：

1. 安装所需依赖

首先，在终端中切换到你的项目目录下，使用以下命令安装所需依赖：

npm install vuex --save-dev

2. 创建Vuex store

在src目录下创建store目录，并在其中创建index.js文件。在index.js文件中，先引入Vue和Vuex：

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

Vue.use(Vuex);

接着创建Vuex store：

const store = new Vuex.Store({
  state: {
    // 定义状态，包括购物车中所有的商品信息
    products: []
  },
  mutations: {
    // 定义mutation，添加商品到购物车中
    addProduct(state, product) {
      state.products.push(product);
    },
    // 定义mutation，从购物车中删除商品
    removeProduct(state, productId) {
      let index = state.products.findIndex(p => p.id === productId);
      state.products.splice(index, 1);
    },
    // 定义mutation，更新购物车中商品的数量
    updateProductQuantity(state, payload) {
      let index = state.products.findIndex(p => p.id === productId);
      state.products[index].quantity = payload.quantity;
    }
  }
});

代码中我们定义了一个state对象，包含购物车中所有商品信息。mutations中定义了三个mutation方法，分别为添加商品到购物车中、从购物车中删除商品以及更新购物车中商品的数量等。这三个方法将直接操作state对象的数据，从而实现对购物车中商品的增删改查操作。

3. 在Vue组件中使用Vuex

在Vue组件中使用Vuex需要引入vuex：

import { mapState, mapMutations } from 'vuex';

接着使用mapState将Vuex store中定义的state对象映射到Vue组件中：

export default {
  computed: mapState(['products'])
}

这样就可以通过this.products在Vue组件中访问到store中的products数组了。

接着使用mapMutations将mutations中定义的三个方法映射到Vue组件中：

methods: {
  ...mapMutations(['addProduct', 'removeProduct', 'updateProductQuantity']),
  addToCart(product) {
    this.addProduct(product);
  },
  removeFromCart(productId) {
    this.removeProduct(productId);
  },
  updateQuantity(productId, quantity) {
    this.updateProductQuantity({
      productId: productId,
      quantity: quantity
    });
  }
}

通过methods中的addToCart方法、removeFromCart方法以及updateQuantity方法可以直接调用mapMutations中映射的mutation方法，从而对购物车中商品的增删改查进行操作。

示例1：添加商品到购物车

this.addProduct(product);

示例中的product是一个对象，包含了要添加的商品的所有信息。调用addProduct方法将该商品对象添加到购物车中。

示例2：更新购物车中商品的数量

this.updateProductQuantity({
  productId: productId,
  quantity: quantity
});

示例中的productId是要更新数量的商品的ID，quantity是要更新的商品数量。通过调用updateProductQuantity方法可以实现对购物车中的商品数量进行更新。

以上就是使用Vuex写购物车H5页面的攻略。在实际开发中，我们可以结合实际需求对Vuex store进行扩展，增加更多的mutation、action等方法，从而实现更复杂的操作。