Vuex的基本用法

1.Vuex简介
　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。这是官网对于Vuex的简介。
　我的大作业是一个使用Vue-cli生成的项目，按照需求，需要对很多组件之间的状态进行管理，数据交流不止限于父子组件，为了简化操作，我就选用了Vuex进行集中式的状态管理，也顺便学习一下新的东西。
　下图是我的大作业在装了Vue Devtools之后，显示的某个阶段Vuex状态的截图，可见Vuex的状态在调试过程中是很容易观察的。

2.Vuex的使用
　个人觉得学习Vuex最直接最有效的方法就是看Vuex的官方文档，它里面介绍了Vuex的安装以及核心概念。
　Vuex的安装过程很简单，在我的项目中，我是用npm安装的。

npm install vuex --save

　安装完成之后，在项目中新建store文件夹和store.js文件（也可以用别的名字）。
　
　在store.js中，引入Vue和Vuex，然后定义store并暴露这个接口

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 自己按需定义state，getters，mutations，actions的内容
  ...
})
export default store

　然后在main.js中引入Vuex和store，在new Vue中加入store，就可以将store实例注入到所有的子组件了。

import Vuex from 'vuex'
import store from './store/store'

Vue.use(Vuex)
new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  router,
  components: { App },
  template: '<App/>'
})

　state，getters，mutations，actions都是Vuex的核心概念，至于Module，如果项目不大，其实可以不需要。这些核心概念建议阅读官方文档。个人的理解是，你可以把state看成是所有组件的一种data，而getters可以看做是计算属性，如果不是返回一个函数，那么getters将是响应式的，mutations只能包含同步操作，只有mutation可以直接修改state，而actions可以有异步操作，所以有api请求之类的异步操作，则应该放在actions，actions可以提交mutation，也可以触发其他的action和getter。总之Vuex的结构就是和组件的内部结构有很多的相似之处。
　我们可以将state看成是所有组件共用的data，在组件里，可以通过this.$store.state访问Vuex的state对象，通过this.$store.commit调用mutation，通过this.$store.dispatch调用action，通过this.$store.getters调用getters。



　基础的应用还是比较简单的，安装配置之后，看文档大致就会用了。