From 331c59a00085268691b7d7c81ffe2253746f46f1 Mon Sep 17 00:00:00 2001 From: ktsn Date: Wed, 28 Sep 2016 00:06:29 +0900 Subject: [PATCH] add more concrete description for namespace --- docs/en/modules.md | 40 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/docs/en/modules.md b/docs/en/modules.md index 16022476f..695dcabda 100644 --- a/docs/en/modules.md +++ b/docs/en/modules.md @@ -71,7 +71,45 @@ const moduleA = { ### Namespacing -Note that actions, mutations and getters inside modules are still registered under the **global namespace** - this allows multiple modules to react to the same mutation/action type. You can namespace the module assets yourself to avoid name clashing, and you probably should if you are writing a reusable Vuex module that will be used in unknown environments. +Note that actions, mutations and getters inside modules are still registered under the **global namespace** - this allows multiple modules to react to the same mutation/action type. You can namespace the module assets yourself to avoid name clashing by prefixing or suffixing their names. And you probably should if you are writing a reusable Vuex module that will be used in unknown environments. For example, we want to create a `todos` module: + +``` js +// types.js + +// define names of getters, actions and mutations as constants +// and they are prefixed by the module name `todos` +export const DONE_COUNT = 'todos/DONE_COUNT' +export const FETCH_ALL = 'todos/FETCH_ALL' +export const TOGGLE_DONE = 'todos/TOGGLE_DONE' +``` + +``` js +// modules/todos.js +import * as types from '../types' + +// define getters, actions and mutations using prefixed names +const todosModule = { + state: { todos: [] }, + + getters: { + [types.DONE_COUNT] (state) { + // ... + } + }, + + actions: { + [types.FETCH_ALL] (context, payload) { + // ... + } + }, + + mutations: { + [types.TOGGLE_DONE] (state, payload) { + // ... + } + } +} +``` ### Dynamic Module Registration