从数据库数据动态创建Vuex getter

// 假设我们从数据库获取用户偏好设置
const userPreferences = {
  discountRate: 0.1 // 用户享受 10% 的折扣
};

// Vuex store 定义
const store = new Vuex.Store({
  state: {
    products: [
      { id: 1, name: 'Product A', price: 100 },
      { id: 2, name: 'Product B', price: 200 }
    ]
  },
  getters: {
    // 动态创建的 getter
    discountedPrice: (state) => (productId) => {
      const product = state.products.find(p => p.id === productId);
      if (product) {
        return product.price * (1 - userPreferences.discountRate);
      }
      return null;
    }
  }
});

// 在组件中使用
computed: {
  productPrice() {
    return this.$store.getters.discountedPrice(this.productId);
  }
}

// 假设我们有一个函数来更新用户偏好设置
function updateUserPreferences(newPreferences) {
  userPreferences = newPreferences;
  // 更新 Vuex 中的状态，触发 getter 的重新计算
  store.commit('updateUserPreferences', newPreferences);
}

// Vuex mutation 定义
const store = new Vuex.Store({
  state: {
    userPreferences: userPreferences,
    products: [...]
  },
  mutations: {
    updateUserPreferences(state, newPreferences) {
      state.userPreferences = newPreferences;
    }
  },
  getters: {
    discountedPrice: (state) => (productId) => {
      // 使用 state.userPreferences 而不是全局变量
      const product = state.products.find(p => p.id === productId);
      if (product) {
        return product.price * (1 - state.userPreferences.discountRate);
      }
      return null;
    }
  }
});