You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/vuex/modules.md
+19-17Lines changed: 19 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,11 @@ type: vuex
4
4
order: 8
5
5
---
6
6
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
8
8
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:
Also, inside module getters, the root state will be exposed as their 3rd argument:
75
+
在模块的 getters 内,根状态也会作为第三个参数暴露。
74
76
75
77
```js
76
78
constmoduleA= {
@@ -83,15 +85,15 @@ const moduleA = {
83
85
}
84
86
```
85
87
86
-
### Namespacing
88
+
### 命名空间
87
89
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:
//define getters, actions and mutations using prefixed names
106
+
//用带前缀的名称来定义 getters, actions and mutations
105
107
consttodosModule= {
106
108
state: { todos: [] },
107
109
@@ -125,18 +127,18 @@ const todosModule = {
125
127
}
126
128
```
127
129
128
-
### Dynamic Module Registration
130
+
### 注册动态模块
129
131
130
-
You can register a module **after** the store has been created with the `store.registerModule` method:
132
+
你可以用 `store.registerModule` 方法在 store 创建**之后**注册一个模块:
131
133
132
134
```js
133
135
store.registerModule('myModule', {
134
136
// ...
135
137
})
136
138
```
137
139
138
-
The module's state will be exposed as `store.state.myModule`.
140
+
模块的 `store.state.myModule` 暴露为模块的状态。
139
141
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.
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 创建的时候声明的模块)。
Copy file name to clipboardExpand all lines: src/vuex/structure.md
+13-13Lines changed: 13 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -4,33 +4,33 @@ type: vuex
4
4
order: 9
5
5
---
6
6
7
-
Vuex doesn't really restrict how you structure your code. Rather, it enforces a set of high-level principles:
7
+
实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则:
8
8
9
-
1.Application-level state is centralized in the store.
9
+
1.应用级的状态集中放在 store 中。
10
10
11
-
2.The only way to mutate the state is by committing **mutations**, which are synchronous transactions.
11
+
2.改变状态的唯一方式是提交**mutations**,这是个同步的事务。
12
12
13
-
3.Asynchronous logic should be encapsulated in, and can be composed with **actions**.
13
+
3.异步逻辑应该封装在**action** 中。
14
14
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 多个文件即可。
16
16
17
-
For any non-trivial app, we will likely need to leverage modules. Here's an example project structure:
17
+
对于稍微复杂点的应用,我们可能都需要用到模块。下面是一个简单的项目架构:
18
18
19
19
```bash
20
20
├── index.html
21
21
├── main.js
22
22
├── api
23
-
│ └── ... #abstractions for making API requests
23
+
│ └── ... #这里发起 API 请求
24
24
├── components
25
25
│ ├── App.vue
26
26
│ └── ...
27
27
└── 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
31
31
└── modules
32
-
├── cart.js # cart module
33
-
└── products.js # products module
32
+
├── cart.js # cart 模块
33
+
└── products.js # products 模块
34
34
```
35
35
36
-
As a reference, check out the [Shopping Cart Example](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart).
0 commit comments