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
  }
}

如果你有一个parentComponent of sort（Product），你如何在上面的实例中构造状态，你也必须管理childComponent状态（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，您可以添加一个操作来处理Variant和Product的同时更新：

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

了解有关数据规范化的更多信息

在Vuex商店中构建状态

1 个答案: