vuex-com-a.vue组件-文件
src/components/com-a.vue
<template>
<div class='container'>
COM-A <button @click="fn(100)">自增</button> <button @click="asyncGetData({id:100})">异步获取数据</button><br>
基础使用:{{$store.state.count}} <br>
计算数据:{{count}} <br>
<!-- 计算总和:{{incrementResult}} -->
自己计算属性:{{myCountCom}}
</div>
</template>
<script>
// 使用 vuex 提供的数据 访问起来较为麻烦
// 建议 申明计算属性 访问vuex提供的数据,在模块中使用方便一些。
// 导入 mapState 函数,帮助在计算属性申明数据,简洁的使用vuex数据
import {mapState, mapMutations, mapActions} from 'vuex'
export default {
data () {
return {
myCount: 10000
}
},
methods: {
// getData () {
// // 调用 vuex 中提供的actions申明的函数
// this.$store.dispatch('asyncGetData',{id: 100})
// },
// ...mapActions({getData:'asyncGetData'}),
...mapActions(['asyncGetData']),
// fn () {
// // 修改 vuex 提供的 count 数据
// // 在组件内 调用 mutations提供的数据修改函数
// // this.$store.commit('increment')
// //可以传参数的写法
// this.$store.commit('increment', 10)
// },
// 在 methods 申明了函数 increment , 作用:this.$store.commit('increment')
// ...mapMutations(['increment'])
// 在 methods 申明了函数 fn , 作用:this.$store.commit('increment')
...mapMutations({fn:'increment'})
},
// computed: {
// count () {
// return this.$store.state.count
// }
// }
// 使用传入对象
// computed: mapState({
// // 最传统方式定义一个数据
// // count: function(state) {
// // return state.count
// // }
// // ES6 简写
// // count: state => state.count
// // 最简单写法
// count: 'count',
// // 模版上的数据 依赖vuex提供的数据 和 当前组件申明的数据
// incrementResult: function(state) {
// return state.count + this.myCount
// }
// })
// 使用数组
// computed: mapState(['count'])
// 如果 自己申明计算属性 也得依赖vuex数据申明计算属性
// 终极写法 推荐....
computed: {
// 自己的计算属性
myCountCom() {
return this.myCount + 1
},
// 依赖 vuex 的计算属性
...mapState(['count'])
}
}
</script>
<style scoped lang='less'></style>