在 Vuex Store 中构建状态

Question

我最近开始学习 Vuex，我想对如何正确构建 Vuex/Flux-like 商店的状态有一些见解

让我们看看下面的例子

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，它允许您编辑应该传播到父 table.

的变体属性

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

阅读有关数据规范化的更多信息

在 Vuex Store 中构建状态

Structuring the state in a Vuex Store

javascript

flux

vuex