Javascript 在Vuex存储中构造状态

我最近开始学习Vuex，我想了解一下如何正确构建Vuex/Flux类商店的状态

让我们看看下面的例子

ProductStore

state: {
  name: 'some name',
  price: 'some price',
  variants: [],
  selectedVariant: {},
}

mutations: {
  [ADD_VARIANT] (state, newVariant) {
    state.variants.push(newVariant)
  }

  [DELETE_VARIANT] (state, deletedId) {
    state.variants = _.filter(state.variants, c => c.id == deleteID )
  }

  [EDIT_VARIANT] (state, editedComment) {
    //...
  }

  [EDIT_SELECTED_VARIANT_TYPE] (state, variantType) {
    state.selectedVariant.type = variantType
  }
}

当您拥有SortsProduct的parentComponent并且您必须管理子组件状态以及变体时，如何在上述实例中构造状态

---

在我的特定实例中，我有一个ProductPage。在它里面，我有一个变量。在VariantTable中选择一个项目将显示VariantMode，该模式允许您编辑应传播到父表的变量属性。

规范化存储的状态。如果产品变量关系为纯1-n，则商店的状态可以是：

state: {
  name: 'some name',
  price: 'some price',
  variants: [
    { variantId: 'V1', ProductId: 'P1' },
    ...
  ],
  selectedVariant: {},
  products: [
    { productId: 'P1' },
    ...
  ]
}

然后，您可以添加一个操作来同时处理变量和产品更新：

..., // state goes above
mutations: {
  ...
  [EDIT_PRODUCT] (args) => { ... }
},
actions: {
  [EDIT_PRODUCT_VARIANT] ({ commit, state }, editedComment) {
    // take extra data if need via state
    commit([EDIT_VARIANT], editedComment);
    commit([EDIT_PRODUCT], { productId: editedComment.ProductId })
  }
}

关键是尽可能避免数据重复和嵌套数据，同时允许快速高效地更新数据

阅读有关数据规范化的更多信息，请访问