vuex-com-a.vue组件-文件

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>