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

Posted 2023-02-22

【中文标题】如何在模块命名空间中使用 Vuex 类型常量？

【英文标题】：How to use Vuex types constants with module namespace?

【发布时间】：2018-05-18 16:11:45

【问题描述】：

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

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

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

如何避免？

【参考方案1】：

来自@hedin 的The answer 为我工作出色，谢谢！

我遇到的唯一问题是：

我正在使用 Typescript。

这可能有点过于冗长，影响可读性。但是类型安全对我来说更重要，我愿意容忍一些冗长的类型检查。

受他的设计启发，我对其进行了打字并减少了冗长。

（我正在使用 Vue 3（带有组合 API）+ Vuex 4（带有命名空间模块）。）

首先，我创建了如下所示的namespace-helper.ts：

import _ from "lodash";

type NamespaceHelper = 
  [name: string]: string;
;

// Enhanced from @hedin, see https://***.com/a/47646215/1360592
export default (
  namespace: string,
  types: any,
  section: "getters" | "actions" | "mutations",
): NamespaceHelper => 
  return _.reduce(
    types,
    (typeObj: NamespaceHelper, typeValue, typeName) => 
      if (typeName === section) 
        return _.reduce(
          typeValue,
          (obj: NamespaceHelper, v, k) => 
            obj[k] = v.replace(namespace, "");
            return obj;
          ,
          ,
        );
      
      return typeObj;
    ,
    ,
  );
;

然后在我的商店模块中，我有：

const namespace = "things";

// For external use
export const Types = 
  getters: 
    GET_FIRST_THING: `$namespace/GET_FIRST_THING`,
    GET_SECOND_THING: `$namespace/GET_SECOND_THING`,
  ,
  actions: 
    DO_FIRST_THING: `$namespace/DO_FIRST_THING`,
    DO_SECOND_THING: `$namespace/DO_SECOND_THING`,
  ,
  mutations: 
    SET_FIRST_THING: `$namespace/SET_FIRST_THING`,
    SET_SECOND_THING: `$namespace/SET_SECOND_THING`,
  ,
;

// For internal use in the same store
const _getters = removeNamespace(`$namespace/`, Types, "getters");
const _actions = removeNamespace(`$namespace/`, Types, "actions");
const _mutations = removeNamespace(`$namespace/`, Types, "mutations");

// getters
const getters: GetterTree<MyStoreState, RootState> = 
  [_getters. GET_FIRST_THING]: (state) => 
    return state.blah;
  ,
  ...
;

// actions
const actions: ActionTree<MyStoreState, RootState> = 
  [_actions.DO_FIRST_THING]: ( commit ) => 
    // do stuff here
    ...
    commit(_mutations.SET_FIRST_THING);
  ,
;

// mutations
const mutations = 
  [_mutations.SET_FIRST_THING]: (state: MyStoreState) => 
    state.blah = "foo";
  ,
;

export default 
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
;

这是我从组件中使用它的方式：

<script lang="ts">
// imports go here, not shown for brevity

import  Types  from "@/store/modules/things";

export default defineComponent(
  name: "Thing",
  setup(props) 
    const store = useStore<RootState>();

    // I prefer singular for consuming getters and actions externally.
    const  getters: getter, actions: action  = Types;

    const firstThing = computed<ThingType>(() =>
      store.getters[getter.GET_FIRST_THING],
    );

    store.dispatch(action.DO_FIRST_THING);

    return 
      firstThing,
    ;
  ,
);
</script>

【讨论】：

我需要在 store 中添加import removeNamespace from '../namespace-helper'，但是 _actions 属于 NamespaceHelper 类型并且没有 _getter 或其他属性。

【参考方案2】：

您可以通过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

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

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 函数：

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