153-Vue中的vuex内的辅助函数——mapState,mapGetters,mapMutations,mapActions的用法

153-Vue中的vuex内的辅助函数——mapState,mapGetters,mapMutations,mapActions的用法

首先查看目录：

 

此文章所涉及到的代码：src/components/Comp1.vue

store/index.js

views/HomeView.vue

其它的都是初建的代码，未做改动，此处不展示。

Comp1.vue代码如下：

<template>
<!-- Vuex辅助函数写法 -->
    <div>
        <p>{{num}}</p>
        <p>{{title}}</p>
        <p>{{dbNum}}</p>
        <button @click="chanNum(1)">同步按钮</button>
        <!-- <button @click="add">同步按钮</button> -->
        <button @click="asyncChanNum(100)">异步按钮</button>
        <!-- <button @click="add1">异步按钮</button> -->
    </div>
</template>

<script>
import { mapMutations, mapState,mapActions,mapGetters } from 'vuex'
export default {
    methods:{
        ...mapMutations(['chanNum']), // 同步
        // add(){
        //     this.$store.commit('chanNum',10)
        // },
        ...mapActions(['asyncChanNum']), // 异步
        // add1(){
        //     this.$store.dispatch('asyncChanNum',100)
        // }
    },
    computed:{
        ...mapState(['num','title']),
        // num(){
        //     return this.$store.state.num
        // }
        ...mapGetters(['dbNum']),
        // dbNum(){
        //     return this.$store.getters.dbNum
        // }
    },
    data () {
        return {

 
        }
    }
}
</script>
 
<style lang = "less" scoped>
    
</style>

 store/index.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num:11,
    title:'标题'
  },
  getters: {
    dbNum(state){
      return state.num*2
    }
  },
  mutations: { // 同步
    chanNum(state,payload){
      state.num+=payload
    }
  },
  actions: { // 异步
    asyncChanNum({commit},payload){
      setTimeout(()=>{
        commit('chanNum',payload)
      },1000)
    }
  },
  modules: {
  }
})

views/HomeView.vue代码如下：

<template>
  <div class="home">
    <HelloWorld />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/Comp1.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

下面显示操作步骤：

最终效果如下：