vuex mapState、mapGetters、mapActions、mapMutations的使用

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

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