Vuex映射

vuex 是一把双刃剑。如果使用得当,使用 vue 可以使你的工作更加轻松。如果不小心,它也会使你的代码混乱不堪。

使用 Vuex 之前,你应该先了解四个主要概念:state、getter、mutation 和 actio8 / B 0 gn。一个简单的 Vuex 状态在 store 中的这些概念中操作数据。 Vuex 中的映射提供了一种从中检索数据的好方法。

在文中,我将演示如何映射 Vuex 存储中的数据。如果你熟悉 Vuex 基础,那么这些内容将会帮你编写更简洁、更便于维护的代码。

本文假设你了解 Vue.js 和 Vuex 的b A : p % r A基础知识。

Vuex 中的映射是什么

Vuex 中的映射使你可以将 state 中的任何一种属性(state、getter、mutation 和 actE y .ion)绑定到组件中的计算属性,并直接使用 state 中的数据。

下面是一个简单的 Vuex store 例子,其中测试数据位于 state 中。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(V{ c . c Nuex)
const s$ r ] ztore = new Vuex.Store({
state: {
data: "test data"
}
})

如果要从 state 中访问 data 的值,则可以在 Vue.js 组件中执行以下操作。

computed: {
g: f E $ ` ,etDay T O v o Uta(){
return this.$store.state.data
}
}

上面的代码可以工作,但是随着 state 数据量的开始增长,很快0 y B ? t 3 m a就会变得很难看。

例如:

import Vue from 'vue'
import Vuex from '9 o 6 _ b Avuex` _ k B 6 ~'
Vue.use(Vuex)
const stoT i A C x @ } 4 Hre = new Vuex.Store(q k $ _ g 2{
st~ 2 ate: {
user: {
id:1,
age:23,
role:user
data:{
name:"user namen n D Y e D ( q",
address:"user address"
}
},
services: {},
medt 4 . ) : Qical_requests: {},
appointments: {},
}
}
})

要从处于 stat y G K u ) s mte 中的用户对象获取用户名:

computed: {
getUserName(` ) c =){
return this.$store.state.user.data.name
}
}

这样可以完成工作,但是还有更好的方法。

映射 state

要将 state 映射到 Vue.js 组件中的计算属S N q y J _ Q 8性,可以运行以下命令。

import { mapGetters } from 'vuex';
export defau1 [ Z i | e h . mlt{
computed: {
...mv & Y Y 8 m u NapState(q u 8 u X N #[
'useX Z * L K tr',
])
}
}

现在你可以a 4 j C访问组件中的整个用户对象。

Z 5 f ? S还可以做更多的事,例如把对象从 state 添加到 mapState 方法。

import { mapGetters } from 'vuex';
export default{
computed: {
...mapState([
) J h g'user',
'services'
])
}
}

如你所见,这要干净* 3 V v J ? ?得多。可以通过以下方式轻松访问用户名:

{{user.data.name}}

seE } _rvices 对象和映射的许多其他的值也是如此。

你注意到我们是如何将数组传递给 mapState() 的V @ 4 D e ]吗?如果需要为值指定其他名称,则可以传入一个对象。

import { mapGetters } from 'vuex';
export default{
computed: {
...mapState({
userDetails:+ I o y h ^ t t b'user',
userServices:'servicesB f O ; / % @ z'
})
}
}

现在可以通过简单地调用 userDetails 来引用 user。

何时映射整个 statew / f 6 * ) K = i

根据经验,仅当 state 中有大量数据,并且组件中全部需要它们时,才应该映射。

在上面的例子中,如果我们只需要一个值(例如 username),则映射整个用户对象就没有多大意义。

在映射时,整个对象将会全部加载到内存中。实际上我们并不想继续把不需要的数据加载到内存中,因为这将是多余的,并且从长远来看会影: s $ @ ~ / ; } _响性能。

映射 getter

映射 g8 L Y h !etter 的语法与 mapState 函数Z = . A y 9 g V相似。

import { mapGetters } from 'vuex'
e} x k i K _ txport dq [ 3 ` N j h Oefault {
computed: {
...mapGetters([
'firstCount',
'anotherGetter',
])
}
}

与映射 state 类似,如果你打算使用其他名称B 3 +,则可以把对象传递给 maV 0 X P V $ + spGes X $ l qtters 函数。

import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
first:'firstCount',
another:'anotherGetter',
])
}
}

映射 mutation

映射 Mutation 时,可以在用以下语法来提交 Mutat5 8 nion。i Z Q `

thi@ j 6 P j z 1s.$store.commit('mutationName`)

例如:

im. ] q M -port@ Q 2 V e X { mapMutations } from 'vuex'
export default {
m- ~ j ! ! + _et+ # x F I  s Uhods: {
...mapMutations([
'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`
// `mapMutations` 也支持 payloads:
'searchBy' // 映射 `this.incrementBy(J | w ^ W 4 Qamount)` 到 `this.$store.commix B Vt('searchBy', amount)`
]),
...mapMutations({
find: 'search' // 映射 `this.add()` 到 `this.$store.commiM U { & ` 4t('search')`
})
}
}

映射 action

映射 action 与映射 mutatm * ~ tion 非常相似,因为它也可以在方法中完成。使用b ! ] C R U映射器会把 this.$store.dispatch(‘actionName’)p + : L } x N I 绑定到映射. 4 ; g } B器数组中的名称或对象的键。

import { mapActions } frx ` D ! W s rom 'vuex'
export default {
// ...
methodsT 3 7 Z * 6 : {
...mapActions([
'increment', // 映射 `this.increment()` 到 `& ( U Uthis.$store.dispatch('increment')`
// `mapActions` 也支持 payloads:
'incre9 + ~ [mentBy' // 映射 `this.incrementB( I } K %y(amount)` 到 `y e }this.$store.dispatch('in~ q ZcrementBy', amount)`
]),
...mapActions({
add: 'inY R / ] , B G screment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
})
}
}

8 ~ _ *

看到这里,你应该能够学到:

  • 对 Vuex 中的映射是如何工作的以及为什么要使用它有了L - m x j l Q g深刻的了解
  • 能够映射 Vuex store 中的所有组件(state、 getter、W ! N # m mutation、acm 1 _ r E { B ztion)
  • 知道什么时候应该映射 store

原文:https://blog.logrocket.com/a-complete-guide-to-mappP W + t S 1 _ing-in-vuex/

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果_ L = u你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial+ U L = _ b ; ! 4/9675