web-dev-qa-db-ja.com

複数のモジュールを持つvuex名前空間付きmapState

私は何かを逃しているに違いない。複数のモジュールでvuex mapStateを使用するにはどうすればよいですか？

理解している限り、オブジェクトを引数として渡す以外に、名前空間付きのmapStateは、名前空間と、モジュールのメンバーを表すオブジェクト名の配列の2つの引数を取ることができます。このような

// an imcomplete vue
export default {
   computed: mapState('user', ['addresses', 'creditCards']) 
};

しかし、2番目の名前空間から計算にオブジェクトを追加したい場合はどうなりますか？例えばこのようなベンダー：

mapState('vendor', ['products', 'ratings'])

現在、私はこのように両方のmapStateをマージしています：

let userMapState = mapState('user', ['addresses', 'creditCards']); 
let vendorMapState = mapState ('vendor', ['products', 'ratings']);
let mergedMapStates = Object.assign({}, userMapState, vendorMapState);

その後：

// an imcomplete vue
export default {
    computed: mergedMapStates
};

それは機能しますが、それを行うには正しい方法ではありません。またはそれは？

javascriptmodulenamespacesvuex
13
LongHike

スプレッド演算子 を使用します。

computed: {
  ...mapState('user', ['addresses', 'creditCards']),
  ...mapState('vendor', ['products', 'ratings']) 
}
18
thanksd

これはvuexドキュメントからのもので、1つの...mapState({})内ですべて実行できます。 ドキュメント

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},

2019を編集

ネストされたモジュールへのパスを渡し、モジュール参照をよりクリーンにすることもできます（ @ gijswijs に感謝）

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
9
thedanotto

このようにObject.assignを使用することもできます。現在のソリューションに似ていますが、少しクリーンです。

    computed: Object.assign(
        mapState('user', ['addresses', 'creditCards']),
        mapState('vendor', ['products', 'ratings']
    )
0
moladukes