vue-cli项目VueX各项属性概念及用法

先简单介绍下VueX是什么，官网：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
一句话来说就是，声明一个全局属性，我在项目的任何地方都能访问到，都能修改，并且在修改之后同时能影响到其他的组件。
画个图更好理解：————>>>

ok,基础的vue-cli配置和vuex引入就跳过了，直接来看store里面都是些什么：

export default new Vuex.Store({
  state: {	  //放置的初始状态，app启动时全局属性值
    count: 0	  //声明        输出状态的属性值对
  },
  mutations: {	   //通过提交mutations的方式管理state（管理state的方法）
                    //mutations都是同步事务
    increment(state, msg) {	  //state:为store对象，msg提交时传递的数据
      state.count += msg	  //内部写处理方法
    }
  },
  actions: {  //类似于mutations，但是它提交的是mutations，可以包含异步操作
    login({commit}, {user, pass}) {
            //解构参数，第一个参数是与store实例具有相同方法和属性的context对象，不是实例本身，通过解构参数提取实参的commit属性
      commit('increment')	    //直接调用触发commit方法，适用于经常调用
    }
            //通过store.dispatch ( 'login' ) 触发actions
            //actions流程:组件dispatch（）派发任务 ---->  actions处理，调用commit提交mutaions的方法 ---> mutaions触发，管理state --->  state改变
  },
  modules: {
	   a: moduleA,
 	   b: moduleB
	//将整个store分割成一个一个模块，每个模块都拥有自己的 state、mutation、action、getter、嵌套子模块
})

常用方法：

1.组件内提交 this.$store.commit(“mutationsFN”,message)

2.导入Vuex的mapMutations函数，在组件methods内使用对象扩展运算符注册

methods:{
	...mapMutations([
        "increment"
	])
}

// 将 this.increment() 映射为this.$store.commit('increment')
//在组件内可直接通过this.increment ( msg )调用

3.this.$store.dispatch(“actionFN” , {user,pass})
//同样支持荷载模式和对象模式分发

…mapActions(["login])
//组件内调用 this.login()
//返回promise对象，可调用成功回调resolve和reject

 this.login(user).then(res=>{
          console.log("res-->","成功回调")
        }).catch(err=>{
          console.log(err,'--err--',"失败回调")
        })
      },