VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念：

state, getters, mutations, actions, modules。

1.state：vuex的基本数据，用来存储变量

2.geeter：从基本数据(state)派生的数据，相当于state的计算属性

3.mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4.action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5.modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

使用下面这两种方法存储数据：

dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

Vuex的用法：

1.state

state与vue中的data类似，都是用来定义属性值。

例：state:{psd:'123456',phone:'13927975000',time:1
}

2.mutations

mutations用来定义方法，可以通过这个来修改state中的属性值,写方法是最好采用大写

例：mutations:{MODIFY(key){state.psd = key;},TIME(){state.time++;}
}

3.actions

actions因为mutations不能处理异步程序，所以用actions处理，actions不能自己定义方法，都是通过调用mutations中的方法,写方法是最好采用大写

例：actions:{MODIFYTIME({commit}){
　　　　setTimeout(function(){
　　　　　　commit('TIME');},1000);}
}

4.getters

getters与vue中的computed相似，可以监听每个属性值的变化

例：getters:{
　　msg(state){var msg = '';if(state.psd == ''){msg  = '密码不能空'；}else{msg = ’设置成功‘;}return  msg ;}
}

在app.vue页面中引用

import store from './vuex.js';import {mapState,,mapMutations,mapActions,mapGetters}  from 'vuex';new Vue({data:{return{}},methods:{//mutations用法,第一种
　　　　modify(){store.commit('MODIFY');}//mutations用法,第二种...mapMutations[{modify:'MODIFY'}],//actions用法,第一种
　　　　modifytime(){store.commit('MODIFYTIME');}//actions用法,第二种...mapActions[{modifytime:'MODIFYTIME'}]},computed:{//获取state中的值,第一种写法
　　　　psd(){return this.$store.state.psd;}//获取state中的值,第二种写法...mapState[{ psd:store => store.state.psd}]//获取getters中的值,第一种写法
　　　　msg(){return this.$store.state.msg;}//获取getter中的值,第二种写法...mapGetters[{ msg:store=> store.getters.msg}]}
});