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/mutations.md
+35-37Lines changed: 35 additions & 37 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ type: vuex
4
4
order: 6
5
5
---
6
6
7
-
The only way to actually change state in a Vuex store is by committing a mutation. Vuex mutations are very similar to events: each mutation has a string **type**and a**handler**. The handler function is where we perform actual state modifications, and it will receive the state as the first argument:
@@ -13,22 +13,22 @@ const store = new Vuex.Store({
13
13
},
14
14
mutations: {
15
15
increment (state) {
16
-
//mutate state
16
+
//改变 state
17
17
state.count++
18
18
}
19
19
}
20
20
})
21
21
```
22
22
23
-
You cannot directly call a mutation handler. The options here is more like event registration: "When a mutation with type `increment`is triggered, call this handler." To invoke a mutation handler, you need to call **store.commit**with its type:
> Note: This is a feature that will likely be deprecated once we implement mutation filtering in the devtools.
84
+
> 注意：一旦我们实现了 devtools 中过滤 mutation，此特性可能会被弃用。
85
85
86
-
By default, every committed mutation is sent to plugins (e.g. the devtools). However in some scenarios you may not want the plugins to record every state change. Multiple commits to the store in a short period or polled do not always need to be tracked. In such cases you can pass a third argument to `store.commit`to "silence" that specific mutation from plugins:
86
+
默认情况下，每个提交过的 mutation 都会被发送到插件（如 devtools）。然而在某些情况下，你可能不希望插件去记录每个状态更改。像是在短时间多次提交到 store 或轮询，并不总是需要跟踪。在这种情况下你可以在 `store.commit`中传入第三个参数，来指定插件中的 mutation 是否“静默”。
87
87
88
88
```js
89
89
store.commit('increment', {
90
90
amount:1
91
91
}, { silent:true })
92
92
93
-
//with object-style dispatch
93
+
//使用对象风格的 dispatch
94
94
store.commit({
95
95
type:'increment',
96
96
amount:1
97
97
}, { silent:true })
98
98
```
99
99
100
-
### Mutations Follow Vue's Reactivity Rules
100
+
### 遵循 Vue 响应式规则
101
101
102
-
Since a Vuex store's state is made reactive by Vue, when we mutate the state, Vue components observing the state will update automatically. This also means Vuex mutations are subject to the same reactivity caveats when working with plain Vue:
1.Prefer initializing your store's initial state with all desired fields upfront.
104
+
1.推荐预先初始化 store 中你所需的初始状态。
105
105
106
-
2.When adding new properties to an Object, you should either:
106
+
2.向对象添加新的属性时，你应该这样做：
107
107
108
-
-Use`Vue.set(obj, 'newProp', 123)`, or -
108
+
-使用`Vue.set(obj, 'newProp', 123)`, 或 -
109
109
110
-
-Replace that Object with a fresh one. For example, using the stage-2 [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread)we can write it like this:
It is a commonly seen pattern to use constants formutation types in various Flux implementations. This allow the code to take advantage of tooling like linters, and putting all constants in a single file allows your collaborators to get an at-a-glance view of what mutations are possible in the entire application:
@@ -130,20 +130,19 @@ import { SOME_MUTATION } from './mutation-types'
130
130
const store = new Vuex.Store({
131
131
state: { ... },
132
132
mutations: {
133
-
// we can use the ES2015 computed property name feature
134
-
// to use a constant as the function name
133
+
// 我们能够通过使用“ES2015 属性名表达式”功能，来使用常量作为函数名称
135
134
[SOME_MUTATION] (state) {
136
-
// mutate state
135
+
// 改变状态
137
136
}
138
137
}
139
138
})
140
139
```
141
140
142
-
Whether to use constants is largely a preference - it can be helpful in large projects with many developers, but it's totally optional if you don't like them.
One important rule to remember is that **mutation handler functions must be synchronous**. Why? Consider the following example:
145
+
一个重要的原则就是牢记 **mutation 必须是同步函数**。为什么？考虑下面的例子：
147
146
148
147
``` js
149
148
mutations: {
@@ -155,11 +154,11 @@ mutations: {
155
154
}
156
155
```
157
156
158
-
Now imagine we are debugging the app and looking at the devtool's mutation logs. For every mutation logged, the devtool will need to capture a "before" and "after" snapshots of the state. However, the asynchronous callback inside the example mutation above makes that impossible: the callback is not called yet when the mutation is committed, and there's no way for the devtool to know when the callback will actually be called - any state mutation performed in the callback is essentially un-trackable!
You can commit mutations in components with`this.$store.commit('xxx')`, or use the `mapMutations`helper which maps component methods to `store.commit`calls (requires root `store`injection):
Asynchronicity combined with state mutation can make your program very hard to reason about. For example, when you call two methods both withasync callbacks that mutate the state, how do you know when they are called and which callback was called first? This is exactly why we want to separate the two concepts. InVuex, **mutations are synchronous transactions**:
0 commit comments