vuex辅助函数的使用

目标

1.熟练使用mapState
2.熟练使用mapGetters
3.熟练使用mapActions
4.熟练使用mapMutations

知识点

首先在讲解用法前我们先创建一个仓库实例

import Vue from 'vue'
import Vuex from 'vuex'
import {Mockurl} from '@/until'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {  //保存状态（数据）
      count:0,
      data:[]，
      sex:0
      },
  mutations: {  //同步改变state中的状态 （state，payload）第一个参数为state 指向state第二个参数为调用时接受的数据
      changeData(state,actions){
          state.data = [...actions.data]
      },
      add(state){
        ++state.count
      },
      dis(state){
        --state.count
      }
  },
  actions: {  //异步改变state中的状态 通常做异步请求 只能间接通过mutations中的方法去改变state的状态
      getData(store,payload){  //第一个参数是store相当于this上下文，第二个参数为payload 组件调用时传递的参数
          axios.get('/get/data').then(data=>{
              store.commit('changeData',data)  //调用mutations中的指定方法并传递一个参数
          })
      }
  },
  getters:{ //和组件中的computed计算属性类似 监听函数内部依赖数据的变化
      sex(state){
          return state.sex === 0 ? '男':'女'
      }
  }
})

mapState读取仓库状态

<template>
 <div>{{count}}</div>
</template>
 
<script>
import { mapState } from 'vuex'
export default {
 computed:{
  ...mapState(['count']),
 }
}
</script>

mapMutations 修改仓库状态

<template>
 <div>
    <span @click="dis" >-</span>
    {{count}}
    <span @click="add" >+</span>
 </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
 methods:{
    ...mapMutations(['add','dis'])
 }
}
</script>

mapActions 异步处理

<script>
import { mapActions } from 'vuex'
export default {
 methods:{
    ...mapActions(['getData'])
 }
}
</script>

getters 数据派生

    <template>
        <div>
           性别:{{sex}}
        </div>
    </template>
    <script>
    import { mapGetters } from 'vuex'
    export default {
        computed:{
            ...mapGetters(['sex'])
        }
    }
    </script>