Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它通过集中式存储管理应用的所有组件的状态，并以相应的规则确保状态以一种可预测的方式发生变化。在本示例中，我们将探讨如何使用 Vuex 来实现购物车功能。
1. **初始化 Vuex Store**
在 Vue 应用中，我们需要创建一个 Vuex store 文件，比如 `store.js`，来定义上面提到的五个核心属性：
- **state**: 用于存储全局共享的状态，例如购物车商品列表。
- **mutations**: 用于同步更新 state 的方法，例如添加商品到购物车。
- **getters**: 监听并处理 state 的变化，返回计算后的状态，如购物车的总价格。
- **actions**: 用于触发 mutations 的异步操作，例如获取商品列表。
- **modules**: 如果应用较大，可以将状态拆分为多个模块进行管理。
2. **创建 Vuex Store**
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cartList: [], // 购物车商品列表
},
mutations: {
add(state, item) { // 添加商品到购物车
const existItem = state.cartList.find(i => i.id === item.id)
if (existItem) {
existItem.quantity++
} else {
state.cartList.push({ ...item, quantity: 1 })
}
},
},
getters: {
totalPrice(state) { // 计算购物车总价格
return state.cartList.reduce((total, item) => total + item.price * item.quantity, 0)
},
},
actions: {
async fetchGoodsList({ commit }) { // 异步获取商品列表
// 这里省略实际的 API 请求逻辑
},
},
})
```
3. **Vue 组件中使用 Vuex**
- **主页面 Home**：在组件中，我们可以使用 `this.$store` 访问 Vuex 的状态和方法。例如，通过 `this.$store.state.cartList` 获取购物车列表，通过 `this.$store.commit('add', item)` 添加商品到购物车。
```html
<van-icon @click="add(item)" name="shopping-cart-o" color="red" size="24px"/>
```
- **购物车页面 ShopCart**：在购物车页面，我们需要监听购物车的状态变化，例如使用 `v-model` 绑定商品的选中状态，以及使用 `v-model` 和 `@change` 事件更新商品数量。
```html
<van-checkbox v-model="item.ckd"></van-checkbox>
<van-stepper v-model="item.num" @change="changeNum(item.num)"/>
```
4. **组件方法**
在 Vue 组件中，我们需要定义相应的方法来处理事件，如添加商品、更改数量和删除商品。
```javascript
methods: {
add(item) { this.$store.commit('add', item) },
changeNum(newNum) { /* 更新商品数量的逻辑 */ },
del(index) { /* 删除商品的逻辑 */ },
},
```
5. **状态持久化**
为了保存用户的购物车数据，我们可以利用 Vuex 的插件或者浏览器的 `localStorage` 来实现状态的持久化。当应用重新加载时，可以从存储中恢复购物车的状态。
6. **全选与反选**
为了实现全选和反选功能，可以在组件中添加相应的计算属性和方法，通过遍历购物车列表来同步所有商品的选中状态。
7. **界面展示**
通过模板和样式，我们可以构建出商品列表、购物车卡片、步进器、复选框等 UI 元素，实现用户交互。
8. **数据流管理**
Vuex 提倡单向数据流，即数据从父组件到子组件，然后通过 dispatch 或 commit 触发 action 或 mutation 来改变 state，最后再由 getters 提供给组件。
总结，Vuex 通过集中式的状态管理，使得购物车功能的实现变得更加清晰和易于维护。通过定义 state、mutations、getters、actions 和组件方法，我们可以轻松地实现商品的加购、删除、数量增减、全选/反选以及总价计算等功能，同时还可以通过状态持久化来提高用户体验。
