Vuex可以理解为一种开放模式或框架。比PHP有thinkphp，java有spring等，通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）

1、应用级的状态集中放在store中
2、改变状态的方式是提交mutations，这里必须是同步的
3、异步逻辑应该封装在action中

Vuex的五个核心属性

(1) state

state为单一状态树，在state中需要定义我们所需要管理的数组，对象，字符串等等，只有在这里定义了，在Vue.js的组件中才能获取你定义的这个对象的状态。

格式: 
new Vuex.store({ 
  state: {
    属性名： 属性值
  } 
})
// 在组件中: 通过 this.$store.state.属性 来访问 
// 在模板中: 可以省略this直接插值表达式 {{ $store.state.属性 }}

(2) mutation

更改store中state状态的唯一方式就是提交mutation，就很类似事件。每个mutation都有一个字符串类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方式：store.commite

new Vuex.store({
    state: {
        属性名： 属性值
    }, 
    mutations: { 
        函数名(state,payload) {
        // 第一个参数是必须的，表示当前的state。在使用时不需要传入
        // 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
        state.属性名 = payload // 改变state的值
        // 在组件中修改数据 this.$store.commit('mutation名', 实参，给第二个参数)
        } 
    }
})

(3) action

action可以提交mutation，在action中可以执行 store.commit，主要的作用发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部。而且action中可以有任何的异步操作。在页面中如果我们要调用这个action则需要执行: store.dispatch
action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

(4) getter

getter有点类似Vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字(state) {
      return 要返回的值  // 在组件中通过：`$store.getters.getter的名字` 来访问
    }
  }
})

(5) module

module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter

访问模块中的数据，要加上模块名:

• 获取数据项： {{$store.state.模块名.数据项名}}
• 获取getters： {{$store.getters['模块名/getters名']}} 访问模块中的mutations/actions:
• 如果namespaced为true，则需要额外去补充模块名
• 如果namespaced为false，则不需要额外补充模块名 $store.commit('mutations名') namespaced为false
  $store.commit('模块名/mutations名') namespaced为true

export default new Vuex.Store({
    // state: 用来保存所有的公共数据
    state: {},
    getters: {},
    mutations: {},
    actions: {},
    modules: {
        模块名1： {
            // namespaced为true，则在使用mutations时，就必须要加上模块名
            namespaced: true, 
            state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
        }，
        模块名2： {
            // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
            state: {},
            getters: {},
  	    mutations: {},
  	    actions: {},
            modules: {}
       }  
    }
})