javascript - 如何在模块命名空间中使用 Vuex 类型常量？

Question

我有这个 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
};

我使用 namespaced: true flag并且可以像这样使用这个模块:

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

如果我将像在 Vuex 中那样使用常量 official example ，并像这样重构我的 modules/things.js 文件:

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
};

我将不得不使用命名空间前缀:

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

如果我将模块 namespace 前缀包含到 Types 常量中，我将不得不使用字符串前缀 things/ 进行突变/ Action /getter 声明:

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

如何避免这种情况？

Answer 1

您可以通过 namespaced: false 禁用命名空间并且只使用带前缀的常量:

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

- 它会起作用。

但是如果你还想保留namespaced: true在模块中也使用常量，你可以定义两种类型的常量:public 和 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

然后使用私有(private)_types仅在 Vuex 模块内:

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

//...

和公共(public)Types外部模块:

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

同时实现简单的 removeNamespace在您的新 namespace-helper.js 中发挥作用文件:

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;
  }, {});
}