Vuex

Vuex中，有五种基本的对象
state：存储状态，也就是变量
getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
mutations：提交状态修改。也就是set、get中的set，唯一修改state的方式 ，不支持异步操作 。
actions：Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
modules：store的子模块，内容就相当于是store的一个实例 。

使用vue-cli创建项目，并编辑store下的index.js文件

import Vue from 'vue'       // 引入vue
import Vuex from 'vuex'     // 引入vuex

// 导出模块
export default new Vuex.Store({
  state: {
    name:'aiva',
    age:22
  },
  /* 
      getter 相当于计算属性
      getter中的方法默认有两个参数
        1.state 当前VueX对象中的状态对象
        2.getters 当前getters对象，用于将getters下的其他getter拿来用
  */
  getter:{
      lastAge(state) {
          return this.$store.state.age - 1;
      }，
      last(state,getters) {
          return state.name + getters.lastAge;
      }
  },
  /* 
      mutations 是更改state的唯一方式
      mutations中的方法必须是同步函数
      mutations中的方法默认有两个参数
        1.state 当前VueX对象中的状态对象
        2.Payload 该方法在被调用时传递的参数
  */
  mutations: {
    changeName(state,name) {
        state.name = name;
    }
  },
  /* 
      Action 类似于 mutation，不同在于：
        1.Action 提交的是 mutation，而不是直接变更状态。
        2.Action 可以包含任意异步操作。

      Actions中的方法有两个默认参数
        1.context 上下文(相当于箭头函数中的this)对象
        2.payload 挂载参数（该方法在被调用时传递的参数）
  */
  actions: {
    editName(context,payload){
        context.commit('changeName',payload)
    }
  },
  // store的子模块，内容就相当于是store的一个实例 
  modules: {
    childrenA:{
        state:{},
        getters:{},
        ....
    }
  }
})

获取state

 this.$store.state.name;

获取getters

    this.$store.getters.lastAge;

调用 mutations

this.$store.commit('changeName','newName');
    // 对象风格
    this.$store.commit({
      type: 'changeName',
      name: 'newName'
    })