vuex mapState、mapGetters、mapActions、mapMutations的使用，从入门到精通

vue的存储管理模式，困扰了我好久好久，一直没有下定决心好好学习学习，曾导致我一直在vue项目组存储信息用

localStorage.setItem(key,value);//存储信息
localStorage.getItem(key);//获取信息
在这里插句小彩蛋，当你想要存储信息是对象是，必须先对象转化为字符串JSON.stringify(arr);，
当获取值再将字符串转化为JSON.parse(string)

   //对象转字符串
   let arr = [1,2,3];
   JSON.stringify(arr);//'[1,2,3]'
   typeof JSON.stringify(arr);//string

//字符串转对象
let string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object
```

好了，话不多说，我们抓紧时间开始学习vuex stroe

1、vuex的组件安装命令：

npm install vuex --save

2、新建一个store.js的文件，引入我们的vuex
import Vue from 'vue';
import Vuex from 'vuex';
引入之后需要用vue.use进行引入

Vue.use(Vuex)

3、以上就算引入成功，下面我们进行解剖:

首先我们要在我们的main.js中引入我们的store

    import store from './store.js'
    new Vue({
        el：‘#app’,
        router,
        store
    })

一、我们首先开始一个简单的demo
在store.js中，我们先实例化创建



我们通过this.$store.state.count直接获取到store的state的count值

二、Getters：
Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果，这里我们修改Hello World.vue文件如下：

我们在store.js的getters方法中顶一个getChangeState方法，方法里面传的state参数，就是在外层的state,在方法中获取参数从而改变state中的count的值。

export default new Vuex.Store({
    state:{
      count:1
    },
    getters:{
      getChangeState:function(state){
        return state.count+1;
      }
    }
  })

在页面代码中直接this.$store.getters.getChangeState直接可获取展示count 通过getters方法后的count值。

三、Mutations：
在vuex中，如果想要改变store中的变量的状态，唯一的途径只有mutations，所以我们在页面中既然能获取到state中的值，如何取改变他呢？下面让我们学习一下mutations
首先我们在页面中增加一个事件去改变state状态：用 this.$store.commit("addCount");取调取store.js中的addCount的方法。



再次多强调一句，如果，想要传递参数给，addCount,即可，这样this.$store.commit("addCount",n);
例如，增加，一次性加10

四、actions

• Action提交的是Mutation，不能够直接修改state中的状态，而Mutations是可以直接修改state中状态的；
• Action是支持异步操作的，而Mutations只能是同步操作。
• 下面我们来了解一下actions

我们子啊store中首先写入actions方法，用参数countext.commit去调用mutations方法addCount，

export default new Vuex.Store({
    state:{
      count:1
    },
    getters:{
      getChangeState:function(state){
        return state.count+1;
      }
    },
    mutations:{
      addCount(state,n){
        return state.count=state.count+n;
      }
    },
    actions:{
      addCountFun(countext,n){
        countext.commit("addCount",n);
      }
    }
  })

在hello Word.vue中 如何调取actions方法呢？用
this.$store.dispatch("addCountFun",n)

<template>
  <div class="hello">
    <h1>我是页面从页面直接获取的count----{{ this.$store.state.count}}</h1>  
    <h1>页面直接this.$store.getters.getChangeState获取值----{{ this.$store.getters.getChangeState}}</h1>   
    <button @click="add">我是增加</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
     
    }
  },
  methods:{
    add(){
      var n=10;
      // this.$store.commit("addCount",n);
      this.$store.dispatch("addCountFun",n)
    }
  }
}
</script>

可见效果是一样的！~~~~

整理思路：
方法1：我们可以通过this.$store.commit("addCount");更改state中值。

方法2：通过this.$store.dispatch("addCountFun")去调用actions里面的方法，再次用contetxt.commit("addCount")取调用,改变state中值。

接下来让我们研究一下mapState、mapGetters、mapActions，他们是用于压缩代码，跟上面的效果是一样的。这样写为了代码简练。
以上三个都必须提前引入到页面中，按需引入。

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'//按需引入

五、mapState

mapState就是去获取state中的值===this.$store.state.count

<template>
  <div class="hello">
    <h1>我是页面从页面直接获取的count----{{ this.$store.state.count}}</h1>  
    <h1>页面直接this.$store.getters.getChangeState获取值----{{ this.$store.getters.getChangeState}}</h1>   
    <h1>我是通过mapstate获取count值----{{number}}</h1>
    <button @click="add">我是增加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'//按需引入
export default {
  data () {
    return {
     number:0
    }
  },
  computed:{
    ...mapState({
      number:state=>state.count
      //这里是个es6语法，等同于下面的写法
      // number: (function (state) {
      //   return state.count;
      // });
    })
  },
  methods:{
    add(){
      var n=10;
      // this.$store.commit("addCount",n);
      this.$store.dispatch("addCountFun",n)
    }
  }
}
</script>

即可在页面中number获取到state值，如图：

六、mapGetters

mapGetters其实等同于页面直接获取getChangeState方法中值this.$store.getters.getChangeState

七、mapMutations

mapMutations又等同于在点击事件中，调取store方法

  methods:{
   add(){ 
     this.$store.commit("addCount");
     }
   }

两者相等于====

  methods:{
   ...mapMutations({
      add:"addCount"
    })
  }

我们看的结果还是一样的，如图所示

八、mapActions

mapActions又等同于this.$store.dispatch("addCountFun")，先去调用store中的actions中的addCountFun方法，再用context.commit去mutations调取addCount方法。

<template>
  <div class="hello">
    <h3>我是页面从页面直接获取的count----{{ this.$store.state.count}}</h3>  
    <h3>页面直接this.$store.getters.getChangeState获取值----{{ this.$store.getters.getChangeState}}</h3>   
    <h3>我是通过mapstate获取count值----{{number}}</h3>
      <h3>我是通过mapGetters调取getChangeState方法，获取count值----{{number2}}</h3>
    <button @click="add">我是mapActions增加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'//按需引入
export default {
  data () {
    return {
     
    }
  },
  computed:{
    ...mapState({
      number:state=>state.count
    }),
    ...mapGetters({
      number2:'getChangeState'//这个名字是store中getter中的方法名字
    })
  },
  methods:{
  //  ...mapMutations({
  //     add:"addCount"
  //   }),
    ...mapActions({
      add:"addCountFun"
    })
    // add(){
    //   var n=10;
    //   // this.$store.commit("addCount",n);
    //   this.$store.dispatch("addCountFun",n)
    // }
  }
}
</script>

可想而知，结果也是一样一样的！

以上就是我今天分享的关于vuex的全部能容，如有看不懂的地方，既能看官网vuex，这些也算写皮毛，真正理解还需要到开发中去运用，才能熟练掌握，希望我的文章能够让初学者学习的简单些。。。。。。
多谢大家的预览，如有不懂，不会的欢迎底下留言，我会及时帮你解决！！！

小编不易，如有收获，微信赏小编喝杯娃哈哈

单身狗的 葵花宝典，撩妹必备 敬请关注！