如何在模块命名空间中使用 Vuex 类型常量? [英] How to use Vuex types constants with module namespace?

问题描述

我有这个 Vuex 模块:

I have this Vuex module:

//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 和可以像这样使用这个模块:

I use namespaced: true flag and can work with this module like this:

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

如果我使用 Vuex 中的常量 官方示例，并像这样重构我的 modules/things.js 文件:

If I will use constants like in Vuex official example, and refactor my modules/things.js file like this:

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

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

I will have to use namespace prefix:

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

如果我将模块命名空间前缀包含到 Types 常量中，我将不得不使用字符串前缀 things/ 进行突变/操作/getters 声明:

If I will include module namespace prefix to Types constant, I will have to use string prefix things/ for mutations/actions/getters declaration:

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

如何避免这种情况?

推荐答案

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

You can disable namespacing by namespaced: false and just use constants with prefixes:

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:

But if you still want to keep namespaced: true in module and use constants also, you can define two types of constants: public and 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

然后只在 Vuex 模块中使用私有的 _types:

Then use private _types only inside Vuex module:

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

//...

和公共 Types 模块外:

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

同时在新的 namespace-helper.js 文件中实现简单的 removeNamespace 函数:

Also implement simple removeNamespace function in your new namespace-helper.js file:

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

这篇关于如何在模块命名空间中使用 Vuex 类型常量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！