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
Changes from all 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
@@ -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
@@ -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:
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>;
interface Mapper<R> {
(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>;
interface MapperWithNamespace<R> {
(namespace: string, map: string[]): Dictionary<R>;
(namespace: string, map: Dictionary<string>): Dictionary<R>;
}

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

interface 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
@@ -4,9 +4,12 @@ import {
mapState,
mapGetters,
mapActions,
mapMutations
mapMutations,
createNamespacedHelpers
} from "../index";

const helpers = createNamespacedHelpers('foo');

new Vue({
computed: Object.assign({},
mapState(["a"]),
@@ -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";
@@ -59,6 +75,16 @@ new Vue({
j: "j"
}),

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

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

{
otherMethod () {}
}