【vuex的辅助函数】

vuex的辅助函数

vuex的辅助函数 是vuex的进阶用法斜体样式

分为4个 ：

• mapState
• mapGetters
• mapMutations
• mapActions

一、使用

在页面使用vuex的辅助函数 ：
1）在页面引入
//用哪一个引入哪一个

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' 

二、详细介绍 ：

<template>
  <div>
    <p>-------vuex-------</p>
    <p>state----num : {{ $store.state.num }}</p>
    <p>getters----num : {{ $store.getters.comNum }}</p>
    <button @click="add">加{{ shu }}</button>
    <button @click="redy">减{{ shu }}</button>
    <p>--------vuex辅助函数-----------</p>
    <p>state----num : {{ num }}</p>
    <p>getters----num : {{ yh }}</p>
  </div>
</template>

<script>
// 引入
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "",
  components: {},
  data() {
    return {
      shu: 10,
    };
  },
  created() {},
  mounted() {},
  computed: {
    // 使用mapstate
    ...mapState(["num"]),
    // 使用 mapgetters
    // ...mapGetters(["comNum"]),
    // 对象写法
    ...mapGetters({ yh: "comNum" }),
  },
  methods: {
    // 映射方法
    ...mapMutations(["addNum"]),
    ...mapActions(["redeNum"]),
    add() {
      // 调用辅助函数的方法
      this.addNum(this.shu);
      //this.$store.commit("addNum", this.shu);
    },
    // 减
    redy() {
      // 调用辅助函数的方法
      this.redeNum(this.shu);
      //   this.$store.dispatch("redeNum", this.shu);
    },
  },
};
</script>
<style scoped lang='scss'>
</style>

vuex

import { createStore } from 'vuex'
export default createStore({
  state: {
    num : 0
  },
  getters: {
    comNum(state){
      return "$" + state.num
    } 
  },
  mutations: {
    addNum(state,data){
       state.num += data
    }
  },
  actions: {
     redeNum({commit} , data){
        setTimeout(()=>{
           commit( 'addNum' , data*-1 )
        },1000)
     }
  },
  modules: {

  }
})

总结 ：

mapState mapGetters 需要写在 computed 里面
mapMutations mapActions 需要写在 methods 里面