Vuex的学习笔记

当有多个单页应用，每个单页应用需要使用同一个数据的时候，Vuex就派上用场了，它相当于是一个前端的数据库。

Vuex中主要有五个概念：state、getter、action、mutation、module。

state: 用于定义，存储所有的数据，接下来的getter、action、mutation基本上都是操作state里面的内容。
getter: 相当于Vuex中的计算属性，它可以基于state中的内容，获得新的衍生。
mutation: Vuex中主要的修改操作，任何修改state内容的操作，都是在mutation中实现的（注意：这里面的所有操作都是同步的），相当于Vuex中methods。
action: Vuex中实现异步操作办法，传入的参数是mutation里面的方法，而不是state里的值。
module: Vuex中的模块化操作实现的位置，可以将上面state、getter、action、mutation分别写到这里。

用法（安装过程就省略了）：
首先使用vue-cli建立工程:
vue init webpack project
在main.js中导入：

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/index'

Vue.config.productionTip = false
Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

项目结构：

vuex.jpg

注意的地方：
1.store是使用vuex的主要地方test_module是将一个module的state、getter、action、mutation单独拆分出来。
2.test_module中的index是组装这些state、getter、action、mutation的地方。
3.store下的index可以单独在里面定义state，单独使用getter、action、mutation，并定义引入的module。
具体请看：
vuex的demo