Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add missing typings and docs of createNamespacedHelpers #910

Merged
merged 3 commits into from
Aug 16, 2017
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/en/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,3 +193,7 @@ const store = new Vuex.Store({ ...options })
Create component methods options that commit a mutation. [Details](mutations.md#commiting-mutations-in-components)

The first argument can optionally be a namespace string. [Details](modules.md#binding-helpers-with-namespace)

- **`createNamespacedHelpers(namespace: string): Object`**

Create namespaced component binding helpers. The returned object contains `mapState`, `mapGetters`, `mapActions` and `mapMutations` that are bound with the given namespace. [Details](modules.md#binding-helpers-with-namespace)
25 changes: 25 additions & 0 deletions docs/en/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,31 @@ methods: {
}
```

Furthermore, you can create namespaced helpers by using `createNamespacedHelpers`. It returns an object having new component binding helpers that are bound with the given namespace value:

``` js
import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
computed: {
// look up in `some/nested/module`
...mapState({
a: state => state.a,
b: state => state.b
})
},
methods: {
// look up in `some/nested/module`
...mapActions([
'foo',
'bar'
])
}
}
```

#### Caveat for Plugin Developers

You may care about unpredictable namespacing for your modules when you create a [plugin](plugins.md) that provides the modules and let users add them to a Vuex store. Your modules will be also namespaced if the plugin users add your modules under a namespaced module. To adapt this situation, you may need to receive a namespace value via your plugin option:
Expand Down
74 changes: 47 additions & 27 deletions types/helpers.d.ts
Original file line number Diff line number Diff line change
@@ -1,32 +1,52 @@
import Vue = require("vue");

type Dictionary<T> = { [key: string]: T };
type Computed = () => any;
type MutationMethod = (...args: any[]) => void;
type ActionMethod = (...args: any[]) => Promise<any>;

export function mapState (map: string[]): Dictionary<() => any>;
export function mapState (namespace: string, map: string[]): Dictionary<() => any>;
export function mapState (map: Dictionary<string>): Dictionary<() => any>;
export function mapState (namespace: string, map: Dictionary<string>): Dictionary<() => any>;
export function mapState <S>(
map: Dictionary<(this: typeof Vue, state: S, getters: any) => any>
): Dictionary<() => any>;
export function mapState <S>(
namespace: string,
map: Dictionary<(this: typeof Vue, state: S, getters: any) => any>
): Dictionary<() => any>;
type Mapper<R> = {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer using interface as long as possible.

It enables module augmentations, and also is more performant when compiling.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I didn't know about the performance advantage of interface.

(map: string[]): Dictionary<R>;
(map: Dictionary<string>): Dictionary<R>;
};

type MutationMethod = (...args: any[]) => void;
export function mapMutations (map: string[]): Dictionary<MutationMethod>;
export function mapMutations (namespace: string, map: string[]): Dictionary<MutationMethod>;
export function mapMutations (map: Dictionary<string>): Dictionary<MutationMethod>;
export function mapMutations (namespace: string, map: Dictionary<string>): Dictionary<MutationMethod>;

export function mapGetters (map: string[]): Dictionary<() => any>;
export function mapGetters (namespace: string, map: string[]): Dictionary<() => any>;
export function mapGetters (map: Dictionary<string>): Dictionary<() => any>;
export function mapGetters (namespace: string, map: Dictionary<string>): Dictionary<() => any>;

type ActionMethod = (...args: any[]) => Promise<any[]>;
export function mapActions (map: string[]): Dictionary<ActionMethod>;
export function mapActions (namespace: string, map: string[]): Dictionary<ActionMethod>;
export function mapActions (map: Dictionary<string>): Dictionary<ActionMethod>;
export function mapActions (namespace: string, map: Dictionary<string>): Dictionary<ActionMethod>;
type MapperWithNamespace<R> = {
(namespace: string, map: string[]): Dictionary<R>;
(namespace: string, map: Dictionary<string>): Dictionary<R>;
};

type MapperForState = {
<S>(
map: Dictionary<(this: typeof Vue, state: S, getters: any) => any>
): Dictionary<Computed>;
};

type MapperForStateWithNamespace = {
<S>(
namespace: string,
map: Dictionary<(this: typeof Vue, state: S, getters: any) => any>
): Dictionary<Computed>;
};

interface NamespacedMappers {
mapState: Mapper<Computed> & MapperForState;
mapMutations: Mapper<MutationMethod>;
mapGetters: Mapper<Computed>;
mapActions: Mapper<ActionMethod>;
}

export declare const mapState: Mapper<Computed>
& MapperWithNamespace<Computed>
& MapperForState
& MapperForStateWithNamespace;

export declare const mapMutations: Mapper<MutationMethod>
& MapperWithNamespace<MutationMethod>;

export declare const mapGetters: Mapper<Computed>
& MapperWithNamespace<Computed>;

export declare const mapActions: Mapper<ActionMethod>
& MapperWithNamespace<ActionMethod>;

export declare function createNamespacedHelpers(namespace: string): NamespacedMappers;
28 changes: 27 additions & 1 deletion types/test/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ import {
mapState,
mapGetters,
mapActions,
mapMutations
mapMutations,
createNamespacedHelpers
} from "../index";

const helpers = createNamespacedHelpers('foo');

new Vue({
computed: Object.assign({},
mapState(["a"]),
Expand All @@ -33,6 +36,19 @@ new Vue({
e: "e"
}),

helpers.mapState(["k"]),
helpers.mapState({
k: "k"
}),
helpers.mapState({
k: (state: any, getters: any) => state.k + getters.k
}),

helpers.mapGetters(["l"]),
helpers.mapGetters({
l: "l"
}),

{
otherComputed () {
return "f";
Expand All @@ -59,6 +75,16 @@ new Vue({
j: "j"
}),

helpers.mapActions(["m"]),
helpers.mapActions({
m: "m"
}),

helpers.mapMutations(["n"]),
helpers.mapMutations({
n: "n"
}),

{
otherMethod () {}
}
Expand Down