Skip to content

Commit 4997b61

Browse files
committed
Merge branch 'yongbolv-2.0-cn' into 2.0-cn
* yongbolv-2.0-cn: transter modules.md and structure.md # Conflicts: # src/vuex/modules.md # src/vuex/strict.md # src/vuex/structure.md
2 parents 131f805 + 6549574 commit 4997b61

File tree

3 files changed

+34
-30
lines changed

3 files changed

+34
-30
lines changed

src/vuex/modules.md

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ type: vuex
44
order: 8
55
---
66

7-
Due to using a single state tree, all state of our application is contained inside one big object. However, as our application grows in scale, the store can get really bloated.
7+
# Modules
88

9-
To help with that, Vuex allows us to divide our store into **modules**. Each module can contain its own state, mutations, actions, getters, and even nested modules - it's fractal all the way down:
9+
由于使用了单一状态树,应用的所有状态都包含在一个大对象内。但是,随着我们应用规模的不断增长,这个Store变得非常臃肿。
10+
11+
为了解决这个问题,Vuex 允许我们把 store 分 module(模块)。每一个模块包含各自的状态、mutation、action 和 getter,甚至是嵌套模块, 如下就是它的组织方式:
1012

1113
``` js
1214
const moduleA = {
@@ -33,16 +35,16 @@ store.state.a // -> moduleA's state
3335
store.state.b // -> moduleB's state
3436
```
3537

36-
### Module Local State
38+
### 模块本地状态
3739

38-
Inside a module's mutations and getters, The first argument received will be **the module's local state**.
40+
模块的 mutations 和 getters方法第一个接收参数是**模块的本地状态**
3941

4042
``` js
4143
const moduleA = {
4244
state: { count: 0 },
4345
mutations: {
4446
increment: (state) {
45-
// state is the local module state
47+
// state 是模块本地的状态。
4648
state.count++
4749
}
4850
},
@@ -55,7 +57,7 @@ const moduleA = {
5557
}
5658
```
5759

58-
Similarly, inside module actions, `context.state` will expose the local state, and root state will be exposed as `context.rootState`:
60+
相似地,在模块的 actions 中,`context.state` 暴露的是本地状态, `context.rootState`暴露的才是根状态。
5961

6062
``` js
6163
const moduleA = {
@@ -70,7 +72,7 @@ const moduleA = {
7072
}
7173
```
7274

73-
Also, inside module getters, the root state will be exposed as their 3rd argument:
75+
在模块的 getters 内,根状态也会作为第三个参数暴露。
7476

7577
``` js
7678
const moduleA = {
@@ -83,15 +85,15 @@ const moduleA = {
8385
}
8486
```
8587

86-
### Namespacing
88+
### 命名空间
8789

88-
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:
90+
要注意,模块内的 actionsmutations 以及 getters 依然注册在**全局命名空间**内 —— 这就会让多个模块响应同一种 mutation/action 类型。你可以在模块的名称中加入前缀或者后缀来设定命名空间,从而避免命名冲突。如果你的 Vuex 模块是一个可复用的,执行环境也未知的,那你就应该这么干了。距离,我们想要创建一个 `todos` 模块:
8991

9092
``` js
9193
// types.js
9294

93-
// define names of getters, actions and mutations as constants
94-
// and they are prefixed by the module name `todos`
95+
// 定义 getter、 action 和 mutation 的常量名称
96+
// 并且在模块名称上加上 `todos` 前缀
9597
export const DONE_COUNT = 'todos/DONE_COUNT'
9698
export const FETCH_ALL = 'todos/FETCH_ALL'
9799
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
@@ -101,7 +103,7 @@ export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
101103
// modules/todos.js
102104
import * as types from '../types'
103105

104-
// define getters, actions and mutations using prefixed names
106+
// 用带前缀的名称来定义 getters, actions and mutations
105107
const todosModule = {
106108
state: { todos: [] },
107109

@@ -125,18 +127,18 @@ const todosModule = {
125127
}
126128
```
127129

128-
### Dynamic Module Registration
130+
### 注册动态模块
129131

130-
You can register a module **after** the store has been created with the `store.registerModule` method:
132+
你可以用 `store.registerModule` 方法在 store 创建**之后**注册一个模块:
131133

132134
``` js
133135
store.registerModule('myModule', {
134136
// ...
135137
})
136138
```
137139

138-
The module's state will be exposed as `store.state.myModule`.
140+
模块的 `store.state.myModule` 暴露为模块的状态。
139141

140-
Dynamic module registration makes it possible for other Vue plugins to also leverage Vuex for state management by attaching a module to the application's store. For example, the [`vuex-router-sync`](https://github.com/vuejs/vuex-router-sync) library integrates vue-router with vuex by managing the application's route state in a dynamically attached module.
142+
其他的 Vue 插件可以为应用的 store 附加一个模块,然后通过动态注册就可以使用 Vuex 的状态管理功能了。例如,[`vuex-router-sync`](https://github.com/vuejs/vuex-router-sync) 库,通过在一个动态注册的模块中管理应用的路由状态,从而将 vue-router vuex 集成。
141143

142-
You can also remove a dynamically registered module with `store.unregisterModule(moduleName)`. Note you cannot remove static modules (declared at store creation) with this method.
144+
你也能用 `store.unregisterModule(moduleName)` 移除动态注册过的模块。但是你不能用这个方法移除静态的模块(也就是在 store 创建的时候声明的模块)。

src/vuex/strict.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ type: vuex
44
order: 11
55
---
66

7+
# 严格模式
8+
79
要启用严格模式,只需在创建 Vuex store 的时候简单地传入 `strict: true`
810

911
``` js

src/vuex/structure.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,33 @@ type: vuex
44
order: 9
55
---
66

7-
Vuex doesn't really restrict how you structure your code. Rather, it enforces a set of high-level principles:
7+
实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则:
88

9-
1. Application-level state is centralized in the store.
9+
1. 应用级的状态集中放在 store 中。
1010

11-
2. The only way to mutate the state is by committing **mutations**, which are synchronous transactions.
11+
2. 改变状态的唯一方式是提交**mutations**,这是个同步的事务。
1212

13-
3. Asynchronous logic should be encapsulated in, and can be composed with **actions**.
13+
3. 异步逻辑应该封装在**action** 中。
1414

15-
As long as you follow these rules, it's up to you how to structure your project. If your store file gets too big, simply start splitting the actions, mutations and getters into separate files.
15+
只要你遵循这些规则,怎么构建你的项目的结构就取决于你了。如果你的 store 文件非常大,仅仅拆分成 action、mutation 和 getter 多个文件即可。
1616

17-
For any non-trivial app, we will likely need to leverage modules. Here's an example project structure:
17+
对于稍微复杂点的应用,我们可能都需要用到模块。下面是一个简单的项目架构:
1818

1919
``` bash
2020
├── index.html
2121
├── main.js
2222
├── api
23-
│   └── ... # abstractions for making API requests
23+
│   └── ... # 这里发起 API 请求
2424
├── components
2525
│   ├── App.vue
2626
│   └── ...
2727
└── store
28-
├── index.js # where we assemble modules and export the store
29-
├── actions.js # root actions
30-
├── mutations.js # root mutations
28+
├── index.js # 组合 modules export store
29+
├── actions.js # 根 action
30+
├── mutations.js # mutations
3131
└── modules
32-
   ├── cart.js # cart module
33-
   └── products.js # products module
32+
   ├── cart.js # cart 模块
33+
   └── products.js # products 模块
3434
```
3535

36-
As a reference, check out the [Shopping Cart Example](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart).
36+
关于更多,查看 [购物车实例](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart)

0 commit comments

Comments
 (0)