docs: start on 0.4.0 changes

docs/LANGS.md

@@ -1,3 +1,3 @@
 * [English](en/)
-* [简体中文](zh-cn/)
-* [日本語](ja/)
+* [简体中文 (outdated)](zh-cn/)
+* [日本語 (outdated)](ja/)

docs/en/SUMMARY.md

@@ -1,7 +1,8 @@
 # Table of Contents
 
 - [What is Vuex?](intro.md)
-- [Core Concepts](concepts.md)
+- [Getting Started](getting-started.md)
+- Core Concepts
   - [State](state.md)
   - [Mutations](mutations.md)
   - [Actions](actions.md)

docs/en/concepts.md

@@ -1,34 +0,0 @@
-# Core Concepts
-
-You can use the `Vuex.Store` constructor to create Vuex stores. In most cases, you only need a single store for an application. Each Vuex store consists of three types of "ingredients":
-
-- **State**: A plain object representing the application state.
-
-- **Mutations**: Functions that mutates the state. Mutations **must be synchronous**.
-
-- **Actions**: Functions that dispatch mutations. An action can contain asynchronous operations and can dispatch multiple mutations.
-
-- **Getters**: Functions that receive state to return a computed value. Useful for extracting shared computed functions from Vue components.
-
-Why do we differentiate between *mutations* and *actions*, rather then just simple functions that manipulate the state however we want? The reason is because we want to **separate mutation and asynchronicity**. A lot of application complexity roots from the combination of the two. When separated, they both become easier to reason about and write tests for.
-
-> If you are familiar with Flux, note there's a term/concept difference here: Vuex mutations are the equivalent of Flux **actions**, while Vuex actions are equivalent to Flux **action creators**.
-
-### Creating a Vuex Store
-
-> **NOTE:** We will be using ES2015 syntax for code examples for the rest of the docs. If you haven't picked it up, [you should](https://babeljs.io/docs/learn-es2015/)! The doc also assumes you are already familiar with the concepts discussed in [Building Large-Scale Apps with Vue.js](http://vuejs.org/guide/application.html).
-
-Creating a Vuex store is pretty straightforward - just put the aforementioned ingredients together:
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({
-  state: { ... },
-  actions: { ... },
-  mutations: { ... },
-  getters: { ... }
-})
-```
-
-Once created, you can access the state via `store.state`, the actions via `store.actions` and the getters though `store.getters`. You cannot directly access the mutation functions - they can only be triggered by actions or calling `store.dispatch()`. We will discuss each concept in more details next.

docs/en/getting-started.md

@@ -0,0 +1,44 @@
+# Getting Started
+
+At the center of every Vuex application is the **store**. A "store" is basically a container that holds your application **state**. There are two things that makes a Vuex store different from a plain global object:
+
+1. Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes.
+
+2. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly dispatching **mutations**. This makes every state change easily track-able, and enables tooling that helps us better understand our applications.
+
+### The Simplest Store
+
+> **NOTE:** We will be using ES2015 syntax for code examples for the rest of the docs. If you haven't picked it up, [you should](https://babeljs.io/docs/learn-es2015/)! The doc also assumes you are already familiar with the concepts discussed in [Building Large-Scale Apps with Vue.js](http://vuejs.org/guide/application.html).
+
+Creating a Vuex store is pretty straightforward - just provide an initial state object, and some mutations:
+
+``` js
+import Vuex from 'vuex'
+
+const state = {
+  count: 0
+}
+
+const mutations = {
+  INCREMENT (state) {
+    state.count++
+  }
+}
+
+const store = new Vuex.Store({
+  state,
+  mutations
+})
+```
+
+Now, you can access the state object as `store.state`, and trigger a mutation by dispatching its name:
+
+``` js
+store.dispatch('INCREMENT')
+
+console.log(store.state.count) // -> 1
+```
+
+Again, the reason we are dispatching a mutation instead of changing `store.state.count` directly, is because we want to explicitly track it. This simple convention makes your intention more explicit, so that you can reason about state changes in your app better when reading the code. In addition, this gives us the opportunity to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging.
+
+Now this is just the simplest possible example of what a store is. But Vuex is more than just the store. Next, we will discuss some core concepts in depth: [State](state.md), [Mutations](mutations.md), [Actions](actions.md) and [Getters](getters.md).

docs/en/quickstart.md

@@ -1,2 +0,0 @@
-# Quickstart
-

docs/ja/SUMMARY.md

@@ -1,5 +1,7 @@
 # Table of Contents
 
+> Note: The Japanese docs are currently for 0.2.x only. For the latest version please see the English docs instead.
+
 - [Vuex は何ですか？](intro.md)
 - [中核概念](concepts.md)
   - [ステート](state.md)

docs/zh-cn/SUMMARY.md

@@ -1,5 +1,7 @@
 # Table of Contents
 
+> 注意：中文版文档目前只更新到 0.2.x 版本，最新版本的文档请看英文版。
+
 - [什么是 Vuex?](intro.md)
 - [核心概念](concepts.md)
   - [State](state.md)