1. 90前端首页
  2. 前端框架

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中,我们先实例化创建
vuex mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通

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

vuex mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通
我们通过this.$store.state.count直接获取到store的state的count值

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

我们在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值。

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

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

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

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

vuex mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通
再次多强调一句,如果,想要传递参数给,addCount,即可,这样this.$store.commit(\"addCount\",n);
例如,增加,一次性加10
vuex mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通

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

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

四、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>

vuex mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通
可见效果是一样的!~~~~

整理思路:
方法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值,如图:
vuex mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通

六、mapGetters

mapGetters其实等同于页面直接获取getChangeState方法中值this.$store.getters.getChangeState
vuex mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通

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

七、mapMutations

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

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

两者相等于====

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

我们看的结果还是一样的,如图所示
vuex mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通

八、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 mapState、mapGetters、mapActions、mapMutations的使用,从入门到精通

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

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022073199

展开阅读全文

发表评论

登录后才能评论