首页 > 其他 > 详细

vuex mapState、mapGetters、mapActions、mapMutations的使用

时间:2018-10-31 10:07:31      阅读:162      评论:0      收藏:0      [点我收藏+]

 

 

import Vuex from ‘vuex‘
import Vue from ‘vue‘
Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    data:‘test‘
  },
  getters:{
    
  },
  mutations:{

  },
  actions:{

  }
})

 

<template>
  <div id="app">
    {{count}}
   //{{data}}
</div> </template> <script> //想要使用 首先需要按需引入 import {mapState,mapGetters,mapMutations,mapActions} from ‘vuex‘ export default { // 通过对象展开运算符将getter混入computed对象中 computed:{ //相当于 // count(){ // return this.$store.state.data // }
  
  //采用对象方式相当于重命名
...mapState({ count: ‘data‘ })
  //采用数组方式
  //...mapState([data])
  //可在其他钩子中使用this.data调用   }
//其他mapGetters,mapMutations,mapActions原理一样
}
</script>
<style>

</style>

 另外mapState通过扩展运算符将store.state.data映射this.count  这个this 很重要,这个映射直接映射到当前Vue的this对象上。

在钩子函数中可直接 this.count调用

vuex mapState、mapGetters、mapActions、mapMutations的使用

原文:https://www.cnblogs.com/zjx304/p/9880996.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!