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.

Sign up for GitHub

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

Jump to bottom

docs: module state declaration as function #1741

Merged
merged 3 commits into from May 1, 2020
Merged

docs: module state declaration as function #1741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
25ead40
docs(module): state declaration as functions
cuebit Apr 30, 2020
9ccadfc
docs: fix typo [en]
cuebit Apr 30, 2020
6e3a931
fix: replace module states in examples
cuebit Apr 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/api/README.md
View file
Open in desktop
Expand Up @@ -185,7 +185,7 @@ const store = new Vuex.Store({ ...options })
})
```

By default, new handler is added to the end of the chain, so it will be executed after other handlers that were added before. This can be overriden by adding `prepend: true` to `options`, which will add the handler to the beginning of the chain.
By default, new handler is added to the end of the chain, so it will be executed after other handlers that were added before. This can be overridden by adding `prepend: true` to `options`, which will add the handler to the beginning of the chain.

``` js
store.subscribe(handler, { prepend: true })
Expand All @@ -210,7 +210,7 @@ const store = new Vuex.Store({ ...options })
})
```

By default, new handler is added to the end of the chain, so it will be executed after other handlers that were added before. This can be overriden by adding `prepend: true` to `options`, which will add the handler to the beginning of the chain.
By default, new handler is added to the end of the chain, so it will be executed after other handlers that were added before. This can be overridden by adding `prepend: true` to `options`, which will add the handler to the beginning of the chain.

``` js
store.subscribeAction(handler, { prepend: true })
Expand Down
26 changes: 13 additions & 13 deletions docs/fr/guide/modules.md
View file
Open in desktop
Expand Up @@ -8,14 +8,14 @@ Pour y remédier, Vuex nous permet de diviser notre store en **modules**. Chaque

``` js
const moduleA = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
Expand All @@ -37,7 +37,9 @@ Dans les mutations et accesseurs d'un module, le premier argument reçu sera **l

``` js
const moduleA = {
state: { count: 0 },
state: () => ({
count: 0
}),
mutations: {
increment (state) {
// `state` est l'état du module local
Expand Down Expand Up @@ -87,14 +89,14 @@ Par défaut, les actions, mutations et accesseurs à l'intérieur d'un module so

Si vous souhaitez que votre module soit autosuffisant et réutilisable, vous pouvez le ranger sous un espace de nom avec `namespaced: true`. Quand le module est enregistré, tous ses accesseurs, actions et mutations seront automatiquement basés sur l'espace de nom du module dans lesquels ils sont rangés. Par exemple :

```js
``` js
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,

// propriétés du module
state: { ... }, // l'état du module est déjà imbriqué et n'est pas affecté par l'option `namespace`
state: () => ({ ... }), // l'état du module est déjà imbriqué et n'est pas affecté par l'option `namespace`
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
Expand All @@ -109,7 +111,7 @@ const store = new Vuex.Store({
modules: {
// hérite de l'espace de nom du module parent
myPage: {
state: { ... },
state: () => ({ ... }),
getters: {
profile () { ... } // -> getters['account/profile']
}
Expand All @@ -119,7 +121,7 @@ const store = new Vuex.Store({
posts: {
namespaced: true,

state: { ... },
state: () => ({ ... }),
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
Expand Down Expand Up @@ -262,7 +264,7 @@ export default {

Vous devez faire attention au nom d'espace imprévisible pour vos modules quand vous créez un [plugin](./plugins.md) qui fournit les modules et laisser les utilisateurs les ajouter au store de Vuex. Vos modules seront également sous espace de nom si l'utilisateur du plugin l'ajoute sous un module sous espace de nom. Pour vous adapter à la situation, vous devez recevoir la valeur de l'espace de nom via vos options de plugin :

```js
``` js
// passer la valeur d'espace de nom via une option du plugin
// et retourner une fonction de plugin Vuex
export function createPlugin (options = {}) {
Expand Down Expand Up @@ -311,11 +313,9 @@ C'est exactement le même problème qu'avec `data` dans un composant Vue. Ainsi

``` js
const MyReusableModule = {
state () {
return {
foo: 'bar'
}
},
state: () => ({
foo: 'bar'
}),
// mutations, actions, accesseurs...
}
```
22 changes: 11 additions & 11 deletions docs/guide/modules.md
View file
Open in desktop
Expand Up @@ -8,14 +8,14 @@ To help with that, Vuex allows us to divide our store into **modules**. Each mod

``` js
const moduleA = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
Expand All @@ -37,7 +37,9 @@ Inside a module's mutations and getters, the first argument received will be **t

``` js
const moduleA = {
state: { count: 0 },
state: () => ({
count: 0
}),
mutations: {
increment (state) {
// `state` is the local module state
Expand Down Expand Up @@ -94,7 +96,7 @@ const store = new Vuex.Store({
namespaced: true,

// module assets
state: { ... }, // module state is already nested and not affected by namespace option
state: () => ({ ... }), // module state is already nested and not affected by namespace option
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
Expand All @@ -109,7 +111,7 @@ const store = new Vuex.Store({
modules: {
// inherits the namespace from parent module
myPage: {
state: { ... },
state: () => ({ ... }),
getters: {
profile () { ... } // -> getters['account/profile']
}
Expand All @@ -119,7 +121,7 @@ const store = new Vuex.Store({
posts: {
namespaced: true,

state: { ... },
state: () => ({ ... }),
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
Expand Down Expand Up @@ -322,11 +324,9 @@ This is actually the exact same problem with `data` inside Vue components. So th

``` js
const MyReusableModule = {
state () {
return {
foo: 'bar'
}
},
state: () => ({
foo: 'bar'
}),
// mutations, actions, getters...
}
```
22 changes: 11 additions & 11 deletions docs/ja/guide/modules.md
View file
Open in desktop
Expand Up @@ -8,14 +8,14 @@

``` js
const moduleA = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
Expand All @@ -37,7 +37,9 @@ store.state.b // -> `moduleB` のステート

``` js
const moduleA = {
state: { count: 0 },
state: () => ({
count: 0
}),
mutations: {
increment (state) {
// `state` はモジュールのローカルステート
Expand Down Expand Up @@ -94,7 +96,7 @@ const store = new Vuex.Store({
namespaced: true,

// モジュールのアセット
state: { ... }, // モジュールステートはすでにネストされており、名前空間のオプションによって影響を受けません
state: () => ({ ... }), // モジュールステートはすでにネストされており、名前空間のオプションによって影響を受けません
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
Expand All @@ -109,7 +111,7 @@ const store = new Vuex.Store({
modules: {
// 親モジュールから名前空間を継承する
myPage: {
state: { ... },
state: () => ({ ... }),
getters: {
profile () { ... } // -> getters['account/profile']
}
Expand All @@ -119,7 +121,7 @@ const store = new Vuex.Store({
posts: {
namespaced: true,

state: { ... },
state: () => ({ ... }),
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
Expand Down Expand Up @@ -318,11 +320,9 @@ store.registerModule(['nested', 'myModule'], {

``` js
const MyReusableModule = {
state () {
return {
foo: 'bar'
}
},
state: () => ({
foo: 'bar'
}),
// ミューテーション、アクション、ゲッター...
}
```
22 changes: 11 additions & 11 deletions docs/kr/guide/modules.md
View file
Open in desktop
Expand Up @@ -8,14 +8,14 @@

``` js
const moduleA = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
Expand All @@ -37,7 +37,9 @@ store.state.b // -> moduleB'의 상태

``` js
const moduleA = {
state: { count: 0 },
state: () => ({
count: 0
}),
mutations: {
increment (state) {
// state는 지역 모듈 상태 입니다
Expand Down Expand Up @@ -94,7 +96,7 @@ const store = new Vuex.Store({
namespaced: true,

// 모듈 자산
state: { ... }, // 모듈 상태는 이미 중첩되어 있고, 네임스페이스 옵션의 영향을 받지 않음
state: () => ({ ... }), // 모듈 상태는 이미 중첩되어 있고, 네임스페이스 옵션의 영향을 받지 않음
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
Expand All @@ -109,7 +111,7 @@ const store = new Vuex.Store({
modules: {
// 부모 모듈로부터 네임스페이스를 상속받음
myPage: {
state: { ... },
state: () => ({ ... }),
getters: {
profile () { ... } // -> getters['account/profile']
}
Expand All @@ -119,7 +121,7 @@ const store = new Vuex.Store({
posts: {
namespaced: true,

state: { ... },
state: () => ({ ... }),
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
Expand Down Expand Up @@ -311,11 +313,9 @@ Server Side Rendered 앱에서 상태를 유지하는 것처럼 새 모듈을

``` js
const MyReusableModule = {
state () {
return {
foo: 'bar'
}
},
state: () => ({
foo: 'bar'
}),
// 변이, 액션, getters...
}
```
22 changes: 11 additions & 11 deletions docs/ptbr/guide/modules.md
View file
Open in desktop
Expand Up @@ -8,14 +8,14 @@ Para ajudar com isso, o Vuex nos permite dividir nosso _store_ em **módulos**.

``` js
const moduleA = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
Expand All @@ -37,7 +37,9 @@ Dentro das mutações e _getters_ de um módulo, o 1º argumento recebido será

``` js
const moduleA = {
state: { count: 0 },
state: () => ({
count: 0
}),
mutations: {
increment (state) {
// `state` é o estado local do módulo
Expand Down Expand Up @@ -94,7 +96,7 @@ const store = new Vuex.Store({
namespaced: true,

// module assets
state: { ... }, // o estado do módulo já está aninhado e não é afetado pela opção de namespace
state: () => ({ ... }), // o estado do módulo já está aninhado e não é afetado pela opção de namespace
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
Expand All @@ -109,7 +111,7 @@ const store = new Vuex.Store({
modules: {
// herda o namespace do modulo pai
myPage: {
state: { ... },
state: () => ({ ... }),
getters: {
profile () { ... } // -> getters['account/profile']
}
Expand All @@ -119,7 +121,7 @@ const store = new Vuex.Store({
posts: {
namespaced: true,

state: { ... },
state: () => ({ ... }),
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
Expand Down Expand Up @@ -317,11 +319,9 @@ Este é exatamente o mesmo problema com `data` dentro dos componentes Vue. Entã

``` js
const MyReusableModule = {
state () {
return {
foo: 'bar'
}
},
state: () => ({
foo: 'bar'
}),
// mutações, ações, getters...
}
```