javascript - 在 Vuex Store 中构建状态

Question

我最近开始学习 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
  }
}

当您有某种父组件(Product)并且还必须管理子组件状态(Variant)时，如何在上面的实例中构造状态>).

在我的特定实例中，我有一个 ProductPage。其中，我有一个 VariantTable。在 VariantTable 中选择一个项目会弹出一个 VariantModal，它允许您编辑应传播到父表的变体属性。

Answer 1

使您商店的状态正常化。如果 Product-Variant 关系是纯 1-n，则商店的状态可以是:

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

然后用Vuex's action您可以添加一个操作来同时处理变体和产品的更新:

..., // 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 })
  }
}

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

了解有关数据标准化的更多信息，请访问 normalizr