vuex mapStatemapGettersmapActionsmapMutations的使用

Posted 2021-01-16 zjx304

 

 

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调用