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/intro.md
+24-23Lines changed: 24 additions & 23 deletions
Original file line number
Diff line number
Diff line change
@@ -4,27 +4,27 @@ type: vuex
4
4
order: 2
5
5
---
6
6
7
-
# What is Vuex?
7
+
# Vuex 是什么?
8
8
9
-
Vuex is a **state management pattern + library** for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools)to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
However, the simplicity quickly breaks down when we have **multiple components that share common state**:
48
+
不管怎样,当我们有**多组件共享公共状态**时,简单快速地分解如下:
49
49
50
-
-Multiple views may depend on the same piece of state.
51
-
-Actions from different views may need to mutate the same piece of state.
50
+
-多视图可能依赖于同一份状态。
51
+
-来自不同视图的动作可能需要变更同一份状态。
52
52
53
-
For problem one, passing props can be tedious for deeply nested components, and simply doesn't work for sibling components. For problem two, we often find ourselves resorting to solutions such as reaching for direct parent/child instance references or trying to mutate and synchronize multiple copies of the state via events. Both of these patterns are brittle and quickly leads to unmaintainable code.
So why don't we extract the shared state out of the components, and manage it in a global singleton? With this, our component tree becomes a big "view", and any component can access the state or trigger actions, no matter where they are in the tree!
In addition, by defining and separating the concepts involved in state management and enforcing certain rules, we also give our code more structure and maintainability.
57
+
另外,通过定义和分离状态管理中的概念,强制使用某些规则,使得代码更结构化和高可维护性。
58
58
59
-
This is the basic idea behind Vuex, inspired by [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/)and[The Elm Architecture](https://guide.elm-lang.org/architecture/). Unlike the other patterns, Vuex is also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates.
59
+
这是 Vuex 背后的基本思想,受到了 [Flux](https://facebook.github.io/flux/docs/overview.html),[Redux](http://redux.js.org/)和[The Elm Architecture](https://guide.elm-lang.org/architecture/)的启发。不像其他模型,Vuex 也是一个专门为 Vue.js 设计的库,充分利用了它微妙的响应式机制,从而实现高效更新。
60
60
61
61

62
62
63
-
### When Should I Use It?
63
+
### 什么时候应该使用?
64
64
65
-
Although Vuex helps us deal with shared state management, it also comes with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity.
If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple [global event bus](http://vuejs.org/guide/components.html#Non-Parent-Child-Communication) may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be natural next step for you. There's a good quote from Dan Abramov, the author of Redux:
0 commit comments