码迷,mamicode.com
首页 > 其他好文 > 详细

vuex mapState、mapGetters、mapActions、mapMutations的使用

时间:2018-10-31 10:35:45      阅读:391      评论:0      收藏:0      [点我收藏+]

标签:扩展   action   调用   apm   钩子   ...   state   return   rip   

 

 

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的使用

标签:扩展   action   调用   apm   钩子   ...   state   return   rip   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!