web-dev-qa-db-fra.com

Comment utiliser les constantes de types Vuex avec l'espace de noms de module?

J'ai ce module Vuex:

//modules/things.js
const state = {
  firstThing: 'abc',
  secondThing: 'def',
};

const getters = {
  getFirstThing: state => state.firstThing,
  getSecondThing: state => state.secondThing,
};

const mutations = {
  setFirstThing: (state, payload) => state.firstThing = payload,
  setSecondThing: (state, payload) => state.secondThing = payload
};

const actions = {};

export default {
  namespaced: true,   // <------
  state,
  mutations,
  actions,
  getters
};

J'utilise namespaced: trueflag et peut fonctionner avec ce module comme ceci:

this.$store.state.things.firstThing             // <-- return abc here
this.$store.commit('things/setFirstThing', 10)
this.$store.getters['things/getFirstThing']     // <-- return abc here

Si je vais utiliser des constantes comme dans Vuex exemple officiel , et refactoriser mon modules/things.js fichier comme celui-ci:

export const Types = {
  getters: {
    GET_FIRST_THING: 'GET_FIRST_THING',
    GET_SECOND_THING: 'GET_SECOND_THING',
  },
  mutations: {
    SET_FIRST_THING: 'SET_FIRST_THING',
    SET_SECOND_THING: 'SET_SECOND_THING',
  }
};

const getters = {
  [Types.getters.GET_FIRST_THING]: state => state.firstThing,
  [Types.getters.GET_SECOND_THING]: state => state.secondThing,
};

const mutations = {
  [Types.mutations.SET_FIRST_THING]: (state, payload) => state.firstThing = payload,
  [Types.mutations.SET_SECOND_THING]: (state, payload) => state.secondThing = payload
};

Je vais devoir utiliser le préfixe d'espace de noms:

this.$store.commit('things/' + Types.mutations.SET_FIRST_THING, 10);
this.$store.getters['things/' +  + Types.getters.GET_FIRST_THING]

Si j'inclus le préfixe d'espace de nom du module à la constante Types, je devrai utiliser le préfixe de chaîne things/ pour la déclaration des mutations/actions/getters:

const getters = {
  ['things/' + Types.getters.GET_FIRST_THING]: state => state.firstThing,
  ['things/' + Types.getters.GET_SECOND_THING]: state => state.secondThing,
};

Comment éviter ça?

javascriptvue.jsvuejs2vuex
16
Antoine Bernard

Vous pouvez désactiver l'espace de noms en namespaced: false et utilisez simplement des constantes avec des préfixes:

export const Types = {
  getters: {
    GET_FIRST_THING: 'THINGS_GET_FIRST_THING',    // your namespace without '/' slash
    GET_SECOND_THING: 'THINGS_GET_SECOND_THING',
  },
  // ...
}

- ça va marcher.

Mais si vous voulez toujours garder namespaced: true dans le module et utiliser également des constantes, vous pouvez définir deux types de constantes: public et private:

export const Types = {                                               // <-- public
  getters: {
    GET_FIRST_THING: 'things/GET_FIRST_THING',
    GET_SECOND_THING: 'things/GET_SECOND_THING',
  },
  mutations: {
    SET_FIRST_THING: 'things/SET_FIRST_THING',
    SET_SECOND_THING: 'things/SET_SECOND_THING',
  }
};

const _types = removeNamespace('things/', Types);                    // <-- private

Ensuite, utilisez private _types uniquement dans le module Vuex:

const getters = {
  [_types.getters.GET_FIRST_THING]: state => state.firstThing,       
  [_types.getters.GET_SECOND_THING]: state => state.secondThing,
};

//...

et public Types module extérieur:

// some-component.vue
this.$store.commit(Types.mutations.SET_FIRST_THING, 10);
this.$store.getters[Types.getters.GET_FIRST_THING]
// ...

Implémentez également la fonction simple removeNamespace dans votre nouveau namespace-helper.js fichier:

export default function removeNamespace(namespace, types){
  return _.reduce(types, (typeObj, typeValue, typeName) => {
    typeObj[typeName] = _.reduce(typeValue, (obj, v, k)=>{
      obj[k] = v.replace(namespace, '');
      return obj;
    }, {});
    return typeObj;
  }, {});
}
14
hedin