Vuex_学习记录

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}]
　　}
});