如何使用 Vuex 中的映射方法(萌新进阶)
映射方法
映射方法可以让我们使用 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">mutationsbutton>
<button @click="fun2">actionsbutton>
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">mutationsbutton>
<button @click="fun2">actionsbutton>
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')">mutationsbutton>
<button @click="fun2('actions')">actionsbutton>
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">
<br>
<button @click="fun1('mutations')">mutationsbutton>
<button @click="fun2('actions')">actionsbutton>
div>
template>
<script>
import {
mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
name: "App",
methods: {
...mapMutations('mk1',{
fun1:"fun1",
}),
...mapActions('mk1',{
fun2:"fun2"
})
}
};
script>