如何用Vuex代码实现简单的购物车功能

在现代的前端开发中，Vue.js 是一个非常流行的 JavaScript 框架，而 Vuex 则是 Vue.js 的官方状态管理库。Vuex 提供了一种集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本文将详细介绍如何使用 Vuex 实现一个简单的购物车功能。

1. 项目初始化

首先，我们需要创建一个新的 Vue.js 项目。如果你还没有安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

然后，使用 Vue CLI 创建一个新的项目：

vue create vuex-shopping-cart

在项目创建过程中，选择手动配置，并确保选中 Vuex 作为项目的依赖项。

2. 项目结构

创建完项目后，你的项目结构应该类似于以下内容：

vuex-shopping-cart/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── store/
│   │   └── index.js
│   ├── views/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

3. 创建购物车组件

在 src/components/ 目录下创建一个新的组件 ShoppingCart.vue：

<template>
  <div class="shopping-cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - ￥{{ item.price }} x {{ item.quantity }}
        <button @click="removeFromCart(item.id)">移除</button>
      </li>
    </ul>
    <p>总价: ￥{{ totalPrice }}</p>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['cartItems', 'totalPrice'])
  },
  methods: {
    ...mapActions(['removeFromCart'])
  }
};
</script>

<style scoped>
.shopping-cart {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 20px;
}
</style>

4. 创建商品列表组件

在 src/components/ 目录下创建另一个组件 ProductList.vue：

<template>
  <div class="product-list">
    <h2>商品列表</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - ￥{{ product.price }}
        <button @click="addToCart(product)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100 },
        { id: 2, name: '商品2', price: 200 },
        { id: 3, name: '商品3', price: 300 }
      ]
    };
  },
  methods: {
    ...mapActions(['addToCart'])
  }
};
</script>

<style scoped>
.product-list {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 20px;
}
</style>

5. 配置 Vuex Store

在 src/store/index.js 中配置 Vuex Store：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    ADD_TO_CART(state, product) {
      const item = state.cart.find(item => item.id === product.id);
      if (item) {
        item.quantity++;
      } else {
        state.cart.push({ ...product, quantity: 1 });
      }
    },
    REMOVE_FROM_CART(state, productId) {
      state.cart = state.cart.filter(item => item.id !== productId);
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product);
    },
    removeFromCart({ commit }, productId) {
      commit('REMOVE_FROM_CART', productId);
    }
  },
  getters: {
    cartItems: state => state.cart,
    totalPrice: state => {
      return state.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  }
});

6. 在主应用中使用组件

在 src/App.vue 中使用我们刚刚创建的组件：

<template>
  <div id="app">
    <ProductList />
    <ShoppingCart />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';
import ShoppingCart from './components/ShoppingCart.vue';

export default {
  components: {
    ProductList,
    ShoppingCart
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

7. 运行项目

现在，你可以运行项目并查看效果：

npm run serve

打开浏览器并访问 http://localhost:8080，你应该能够看到一个简单的购物车功能。

8. 功能扩展

8.1 增加商品数量

你可以在购物车中增加一个按钮来增加商品的数量。首先，在 ShoppingCart.vue 中添加一个按钮：

<template>
  <div class="shopping-cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - ￥{{ item.price }} x {{ item.quantity }}
        <button @click="increaseQuantity(item.id)">+</button>
        <button @click="decreaseQuantity(item.id)">-</button>
        <button @click="removeFromCart(item.id)">移除</button>
      </li>
    </ul>
    <p>总价: ￥{{ totalPrice }}</p>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['cartItems', 'totalPrice'])
  },
  methods: {
    ...mapActions(['removeFromCart', 'increaseQuantity', 'decreaseQuantity'])
  }
};
</script>

然后，在 store/index.js 中添加相应的 mutations 和 actions：

mutations: {
  INCREASE_QUANTITY(state, productId) {
    const item = state.cart.find(item => item.id === productId);
    if (item) {
      item.quantity++;
    }
  },
  DECREASE_QUANTITY(state, productId) {
    const item = state.cart.find(item => item.id === productId);
    if (item && item.quantity > 1) {
      item.quantity--;
    }
  }
},
actions: {
  increaseQuantity({ commit }, productId) {
    commit('INCREASE_QUANTITY', productId);
  },
  decreaseQuantity({ commit }, productId) {
    commit('DECREASE_QUANTITY', productId);
  }
}

8.2 持久化购物车数据

为了在页面刷新后仍然保留购物车数据，你可以使用 localStorage 来持久化购物车数据。首先，在 store/index.js 中添加一个 localStorage 的插件：

const localStoragePlugin = store => {
  store.subscribe((mutation, state) => {
    localStorage.setItem('cart', JSON.stringify(state.cart));
  });
};

export default new Vuex.Store({
  state: {
    cart: JSON.parse(localStorage.getItem('cart')) || []
  },
  mutations: {
    // 之前的 mutations
  },
  actions: {
    // 之前的 actions
  },
  getters: {
    // 之前的 getters
  },
  plugins: [localStoragePlugin]
});

这样，购物车数据将会在页面刷新后仍然保留。

9. 总结

通过本文的介绍，你已经学会了如何使用 Vuex 实现一个简单的购物车功能。我们首先创建了购物车和商品列表组件，然后配置了 Vuex Store 来管理购物车的状态。最后，我们还扩展了购物车的功能，包括增加商品数量和持久化购物车数据。

Vuex 是一个非常强大的状态管理工具，它可以帮助你更好地组织和管理应用的状态。希望本文能够帮助你更好地理解 Vuex 的使用，并在实际项目中应用它。