快速学会 Vuex 中的 Map 映射方法

映射方法

映射方法可以让我们使用 Vuex 的方法是更加简洁会减少大量的代码
！！！mutations 和 actions 需要映射到 methods 里，而 state 和 getters 则需要映射到 computed 里

一、普通映射

export default new Vuex.Store({
  state: {
    str: "我是映射过去的 state 方法"
  },
  mutations: {
    fun1(){
      console.log("我是映射过去的 mutations 方法")
    }
  },
  actions: {
    fun2() {
      console.log("我是映射过去的 actions 方法")
    }
  },
  getters: {
    haha() {
      return "我是映射过去的 getters 方法"
    }
  },
  modules: {}
})

调用方法

<template>
  <div id="app">
      {{str}} -------- {{haha}} 
      <br>
      <button @click="fun1">mutations</button>
      <button @click="fun2">actions</button>
  </div>
</template>

<script>
//	引入各种映射方法
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
  name: "App",
  methods: {
  	//	用扩展用算符把需要的方法用下面的语法扩展出来
    ...mapMutations(["fun1"]),
    ...mapActions(["fun2"])
  },
  computed:{
 	//	用扩展用算符把需要的方法用下面的语法扩展出来
    ...mapState(["str"]),
    ...mapGetters(["haha"])
  }
};
</script>

二、映射 modules 中的方法

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    mk1:{
      namespaced: true,
      state: {
        str: "我是映射过去的 state 方法"
      },
      mutations: {
        fun1(){
          console.log("我是映射过去的 mutations 方法")
        }
      },
      actions: {
        fun2() {
          console.log("我是映射过去的 actions 方法")
        }
      },
      getters: {
        haha() {
          return "我是映射过去的 getters 方法"
        }
      },
    }
  }
})

使用映射 modules 中的方法

<template>
  <div id="app">
      {{str}} -------- {{haha}} 
      <br>
      <button @click="fun1">mutations</button>
      <button @click="fun2">actions</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
  name: "App",
  methods: {
  	//	只需要在原来写法的基础上加一个路径写法如下
    ...mapMutations('mk1',["fun1"]),
    ...mapActions('mk1',["fun2"])
  },
  computed:{
  	//	只需要在原来写法的基础上加一个路径写法如下
    ...mapState('mk1',["str"]),
    ...mapGetters('mk1',["haha"])
  }
};
</script>

三、普通映射方法传参

export default new Vuex.Store({
  state: {
    str: "我是映射过去的 state 方法"
  },
  mutations: {
    fun1(state,can){
      console.log("我是映射过去的 actions 方法")
      console.log(can)
    }
  },
  actions: {
    fun2(state,can) {
      console.log("我是映射过去的 actions 方法")
      console.log(can)
    }
  },
  getters: {
    haha() {
      return "我是映射过去的 getters 方法"
    }
  },
  modules: {}
})

使用普通映射方法传参

<template>
  <div id="app">
      <button @click="fun1('mutations')">mutations</button>
      <button @click="fun2('actions')">actions</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
  name: "App",
  methods: {
  	//	映射方法传参需要写成对象格式才可传参
    ...mapMutations({
      fun1:"fun1",
    }),
    ...mapActions({
      fun2:"fun2"
    })
  }
};
</script>

四、映射 modules 中的方法传参

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    mk1:{
      namespaced: true,
      state: {
        str: "我是映射过去的 state 方法"
      },
      mutations: {
        fun1(state,can){
          console.log("我是映射过去的 actions 方法")
          console.log(can)
        }
      },
      actions: {
        fun2(state,can) {
          console.log("我是映射过去的 actions 方法")
          console.log(can)
        }
      },
      getters: {
        haha() {
          return "我是映射过去的 getters 方法"
        }
      }
    }
  }
})

使用映射 modules 中的方法传参

<template>
  <div id="app">
      <!-- {{str}} -------- {{haha}}  -->
      <br>
      <button @click="fun1('mutations')">mutations</button>
      <button @click="fun2('actions')">actions</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
  name: "App",
  methods: {
    ...mapMutations('mk1',{
      fun1:"fun1",
    }),
    ...mapActions('mk1',{
      fun2:"fun2"
    })
  }
};
</script>