标签:扩展 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