如何在模块命名空间中使用 Vuex 类型常量?
How to use Vuex types constants with module namespace?
我有这个 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/
作为 mutations/actions/getters 声明:
const getters = {
['things/' + Types.getters.GET_FIRST_THING]: state => state.firstThing,
['things/' + Types.getters.GET_SECOND_THING]: state => state.secondThing,
};
如何避免这种情况?
您可以通过 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和私人:
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,
};
//...
和public 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;
}, {});
}
来自@hedin 的 对我来说非常出色,谢谢!
我遇到的唯一问题是:
我正在使用 Typescript。
它可能有点过于冗长,影响可读性。然而,类型安全对我来说更重要,我愿意容忍一些冗长的类型检查。
受他设计的启发,我将其打字并减少了冗长。
(我正在使用 Vue 3(具有组合 API)+ Vuex 4(具有命名空间模块)。)
首先,我创建了 namespace-helper.ts
,如下所示:
import _ from "lodash";
type NamespaceHelper = {
[name: string]: string;
};
// Enhanced from @hedin, see
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>
我有这个 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/
作为 mutations/actions/getters 声明:
const getters = {
['things/' + Types.getters.GET_FIRST_THING]: state => state.firstThing,
['things/' + Types.getters.GET_SECOND_THING]: state => state.secondThing,
};
如何避免这种情况?
您可以通过 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和私人:
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,
};
//...
和public 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;
}, {});
}
我遇到的唯一问题是:
我正在使用 Typescript。
它可能有点过于冗长,影响可读性。然而,类型安全对我来说更重要,我愿意容忍一些冗长的类型检查。
受他设计的启发,我将其打字并减少了冗长。
(我正在使用 Vue 3(具有组合 API)+ Vuex 4(具有命名空间模块)。)
首先,我创建了 namespace-helper.ts
,如下所示:
import _ from "lodash";
type NamespaceHelper = {
[name: string]: string;
};
// Enhanced from @hedin, see
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>