構造化はVuexストア

Question

での状態は私は最近Vuexを習い始めて、私はきちんと

は、以下の例を見てみましょうVuex /フラックスのような店の様子を構造化する方法についていくつかの洞察力を持っていると思います

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）のparentComponentにを持っている、あなたはchildComponentが同様の状態（Variant）を管理する必要があるときは、上記のような事例で状態を構造化するにはどうすればよいです。

私の特定の例では、私はProductPageを持っています。その中にはVariantTableがあります。 VariantTableのアイテムを選択すると、VariantModalが表示され、親テーブルに伝播するバリアント属性を編集することができます。

Answer 1

店舗の状態を正規化します。製品・バリアントの関係は、純粋な1-nがある場合は、ストアの状態が指定できます

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

ポイント：

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

その後Vuex's actionとバリアントと一緒に製品の両方を更新処理するためにアクションを追加することができますできるだけデータの重複やネストされたデータを避け、データを迅速かつ効率的に更新できるようにすることです。

データ正規化について詳しくはnormalizr