项目使用 Flux 模式来实现的 SPA，Vuex 是不可绕过的
Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。
from http://www.ruanyifeng.com/blog/2016/01/flux.html
网上有一本电子书：《Vuex Concepts: The Flux Application Architecture for Vue.js》对 Vuex 是 Flux 实现介绍的非常深入浅出，可以搜索到下载地址：
https://leanpub.com/vuex
官方文档是必要的手册补充：
https://vuex.vuejs.org/en/
（本文以下内容为目前自身项目的阶段性设计，所以不建议阅读）
步骤一：
通过异步请求的方式，从后端获取到页面需要的数据，将获取到的数据保存到 Vuex 中
建立 store.js 作为 Vuex 的数据存放对象，使用 axios 对数据进行异步加载：
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(Vuex, VueAxios, axios)
export default new Vuex.Store({
state: {
courses: {} // 如果需要深度响应，必须写清楚对象，形如：courses: {a:''}
},
mutations: {
setCourses (state, res) {
state.courses = res
}
},
actions: {
getCourses (store) {
axios.get('/getCourses').then((response) => {
store.commit('setCourses', response.data)
})
}
}
})
在任何页面中（一般在 layout 中）调用基于 Vue 对象的这段代码，就可以对 Vuex 中的数据进行初始化：
this.$store.dispatch('getCourses')
步骤二：
子模块响应 Vuex 中的数据变化，调用 Vuex 的 getters 接口获取最新加载的数据，并渲染页面
先将 Vuex 中的数据对象映射到子模块中
computed: mapState([
'courses'
]),
然后对这个数据对象建立 watch 监控 courses 的数据变化
watch:{
courses:function(){
this.courseName = this.$store.getters.getCourseById(this.courseId).courseName;
}
},
上面的例子里面使用了 Vuex 的 getters 接口，方便数据获取的封装处理，getters 定义在 store.js 中：
getters: {
getCourseById: (state, getters) => (id) => {
return state.courses.find(course => course.course_id == id)
}
}
踩坑：
-
子模块中如果有同名的数据对象，会让 Vuex 的响应失败，比如前面的例子中，如果有这样的代码在预定义中：
data () { return { courses: '' } },
getters mutations actions 三者的差异：
- getters：第一个参数是 state，可以拿到数据，getters会暴露给 store.getters 进行直接调用
- mutations：第一个参数是 state，相当于 setters，可以对 state 进行直接的写入操作
- actions：参数中没有 state，所以不能直接的操作 state 的值，但是可以调用 getters 和 mutations 来进行对数据变化的控制
深度响应问题
有时候因为 state 的结构会比较复杂，而默认用 state.test.a = value 这样的方式是无法响应的，所以需要用：
mutations: {
setTest (state, value) {
Vue.set(state.test, 'a', value)
},
},
mapState 和 mapActions
Vue 提供了 mapState 和 mapActions 两个方法，可以将 Vuex 里面的 state 和 actions 映射到 components 里面，于是可以在 components 中这么使用：
this.stateName
this.actionName()
PS：mapState 必须在 computed 属性中使用，mapActions 必须在 methods 方法中使用
