面试题：如何在Vue + Vuex项目中实现复杂业务逻辑下的状态同步与数据一致性保障

架构设计

Vuex 模块划分：

创建一个专门的购物车模块（例如 cart.js），用于集中管理购物车相关的状态。在这个模块中定义购物车商品列表、商品数量等状态。
例如：

const state = {
  cartItems: [],
  totalPrice: 0
};
const mutations = {
  ADD_TO_CART(state, item) {
    state.cartItems.push(item);
    state.totalPrice += item.price * item.quantity;
  },
  UPDATE_QUANTITY(state, { index, quantity }) {
    const price = state.cartItems[index].price;
    state.totalPrice -= state.cartItems[index].quantity * price;
    state.cartItems[index].quantity = quantity;
    state.totalPrice += quantity * price;
  },
  REMOVE_FROM_CART(state, index) {
    const price = state.cartItems[index].price;
    state.totalPrice -= state.cartItems[index].quantity * price;
    state.cartItems.splice(index, 1);
  }
};
const actions = {
  addToCart({ commit }, item) {
    commit('ADD_TO_CART', item);
  },
  updateQuantity({ commit }, { index, quantity }) {
    commit('UPDATE_QUANTITY', { index, quantity });
  },
  removeFromCart({ commit }, index) {
    commit('REMOVE_FROM_CART', index);
  }
};
export default {
  state,
  mutations,
  actions
};

多端共享数据：

利用 localStorage 或 sessionStorage 在不同端之间共享购物车数据。在 Vuex 的 state 初始化时，从存储中读取数据并填充到 state 中。例如：

const state = {
  cartItems: JSON.parse(localStorage.getItem('cartItems')) || [],
  totalPrice: JSON.parse(localStorage.getItem('totalPrice')) || 0
};
const mutations = {
  // 其他 mutations...
  UPDATE_LOCAL_STORAGE(state) {
    localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
    localStorage.setItem('totalPrice', JSON.stringify(state.totalPrice));
  }
};
const actions = {
  // 其他 actions...
  updateLocalStorage({ commit }) {
    commit('UPDATE_LOCAL_STORAGE');
  }
};

在每次 mutation 改变购物车状态后，调用 updateLocalStorage 动作，更新本地存储数据，这样不同端在初始化时能获取到最新数据。

数据流向

用户操作：

当用户在 PC 端或移动端进行添加商品、修改数量、删除商品等操作时，对应的组件触发 Vuex 的 actions。例如，在添加商品的按钮点击事件中：

<template>
  <button @click="addToCart(item)">添加到购物车</button>
</template>
<script>
import { mapActions } from 'vuex';
export default {
  methods: {
   ...mapActions(['addToCart'])
  }
};
</script>

Vuex 处理：
- actions 接收到操作后，通过 commit 调用 mutations 来修改 state。例如，addToCart 动作调用 ADD_TO_CART 突变。
- mutations 修改 state 后，触发视图更新，同时调用 UPDATE_LOCAL_STORAGE 突变更新本地存储，以便其他端同步数据。

多端同步：

其他端在初始化时，从本地存储读取数据填充到 Vuex 的 state 中，实现数据同步。例如，移动端初始化时：

const state = {
  cartItems: JSON.parse(localStorage.getItem('cartItems')) || [],
  totalPrice: JSON.parse(localStorage.getItem('totalPrice')) || 0
};

异常处理

网络延迟处理：

在 actions 中，对于涉及网络请求（如添加商品到购物车后端接口调用）的操作，使用 Promise 或 async/await 来处理异步操作。例如：

const actions = {
  async addToCart({ commit }, item) {
    try {
      // 模拟网络请求
      await new Promise((resolve) => setTimeout(resolve, 1000));
      commit('ADD_TO_CART', item);
      commit('UPDATE_LOCAL_STORAGE');
    } catch (error) {
      // 处理网络请求失败，例如提示用户
      console.error('添加商品失败', error);
    }
  }
};

数据一致性异常：
- 在每次从本地存储读取数据填充到 state 时，进行数据格式校验。例如，检查 cartItems 是否为数组格式，如果不是则重置为空数组。
```
const state = {
  cartItems: Array.isArray(JSON.parse(localStorage.getItem('cartItems')))? JSON.parse(localStorage.getItem('cartItems')) : [],
  totalPrice: JSON.parse(localStorage.getItem('totalPrice')) || 0
};
```
- 对于网络请求返回的数据，也进行校验，确保与本地 state 的数据结构一致，不一致时进行相应调整或提示用户。例如，如果后端返回的商品价格格式异常，在前端进行修正或告知用户数据异常。

星途面试题库

面试题：如何在Vue + Vuex项目中实现复杂业务逻辑下的状态同步与数据一致性保障

知识考点

面试题答案

架构设计

数据流向

异常处理