web-dev-qa-db-fra.com

vuex namespaced mapState avec plusieurs modules

J'ai dû louper quelque chose. Comment puis-je utiliser vuex mapState avec plusieurs modules?

Pour autant que nous le comprenions, en plus de passer un objet en argument, mapState avec espace de noms peut prendre deux arguments: un espace de noms et un tableau de noms d'objets désignant les membres des modules. Comme ça

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

Mais que se passe-t-il si je souhaite ajouter des objets d'un deuxième espace de noms au calcul? par exemple. fournisseur comme celui-ci:

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

Actuellement, je fusionne les deux mapState comme ceci:

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

Puis:

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

Cela fonctionne, mais ce n'est pas la bonne façon de le faire. Ou est-ce?

javascriptmodulenamespacesvuex
13
LongHike

Utilisez opérateur d'étalement :

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

C'est à partir des documents vuex, vous pouvez tout faire dans une ...mapState({}). Documentation

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

Modifier 2019

Vous pouvez également passer un chemin vers votre module imbriqué et rendre les références de module plus propres (merci @ gijswijs )

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

Vous pouvez également utiliser Object.assign comme ceci. Similaire à votre solution actuelle mais un peu plus propre.

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