Vue.js Vuex中b/n mapState、MAPGetter、mapActions和MAP突变的差异

我已经使用vue/vuex几个月了，我看到了

mapState

，

mapGetters

，

mapActions

，

mapState

，但除了

mapState

之外，我不知道它们做什么

这就是我如何使用

mapState

// mutations.js 
user: {
   address: {},
   name: '',
   age: ''
}

在我的代码中，我有如下内容：

import { mapState } from 'vuex'
export default {
  data: {},

  computed: {
   ...mapState({
    address: state => state.user.address
   })
  }
} 

然后我可以在任何地方使用地址，但我不知道其他地址的用途

---

有人能举个简单的例子吗？谢谢

这些映射器都不是强制性的。他们的目标只是使在组件中创建计算属性或方法变得容易。它们最好是干燥的（避免重复）

mapState

是一个帮助程序，它简化了创建反映给定状态值的计算属性的过程

同样地：

• mapGetters

  是一个帮助程序，它简化了创建反映给定getter返回的值的computed属性的过程。
  • 请注意，甚至应该映射到计算属性

• mapActions

  是一个帮助程序，它简化了创建方法的过程，该方法相当于对操作调用

  dispatch

• mapstations

  是一个助手，它简化了创建方法的过程，该方法相当于对突变调用

  commit

由于代码有帮助，下面的演示展示了使用所有这些映射器的示例，以及它们在没有映射器的情况下的等效示例。他们的行为完全一样。映射程序只允许您使用较少的代码编写（考虑到这将在应用程序的许多组件中重复）

const store=新的Vuex.store({
严格：是的，
州：{姓名：“约翰”}，
突变：{
变更名称（状态、数据）{
state.name=数据
}
},
行动：{
fetchRandomName（{commit}）{
让randomId=Math.floor（Math.random（）*12）+1；
axios.get（“https://reqres.in/api/users/“+randomId）。然后（响应=>{
提交（'changeName'，response.data.data.first_name）
})
}
},
吸气剂：{
getName:state=>state.name，
getTransformedName:（状态）=>（上限或下限）=>{
返回upperOrLower？state.name.toUpperCase（）：state.name.toLowerCase（）
}
}
});
新Vue({
商店，
el:“#应用程序”，
数据：{newName:'Bob'}，
计算：{
…Vuex.mapState（['name']），
nameNoMapper（）{返回此。$store.state.name}，
…Vuex.mapGetters（['getName'，'getTransformedName']），
getNameNoMapper（）{返回此值。$store.getters.getName}，
GetTransformedNameName（）{返回此值。$store.getters.getTransformedName}
},
方法：{
…Vuex.mapActions（['fetchRandomName']），
…Vuex.MapTranslations（['changeName']），
fetchRandomNameNoMapper（）{this.$store.dispatch（'fetchRandomName'）}，
changeNameNoMapper（newName）{this.$store.commit（'changeName'，newName）}，
}
})

表格，tr，td{
字体系列：monospace；
边框：1px纯黑；
边界塌陷：塌陷；
}

用制图器
没有地图绘制者
名称：{{name}}

getName:{{getName}}

getTransformedName（true）：{{{getTransformedName（true）}}

getTransformedName（false）：{{getTransformedName（false）}
nameNoMapper:{{nameNoMapper}}

getNameNoMapper:{{getNameNoMapper}}

getTransformedNameNoMapper（true）：{{getTransformedNameNoMapper（true）}}

getTransformedNameNoMapper（false）：{{getTransformedNameNoMapper（false）}

操作：fetchRandomName-操作：fetchRandomNameNoMapper


突变：changename突变：changeNameNoMapper

嗯，我不太清楚，这就是为什么我参加考试写下问题示例，所以我想知道。我读过那些文件，来这里是想问一下。埃米尔，没必要这么粗鲁。几乎所有关于SO的答案都可以在某处的文档中找到。这并不意味着不应该问这个问题。如果我只想返回相同的值，那么使用

mapGetters

和

mapState

时在性能方面是否有任何差异？@IrfandyJip不，这是相同的，不起作用。如果你的getter没有进行计算，那么差异是纳秒量级的（计算机的温度应该有一个更高的影响很好的解释。然而，当我试图直接从组件调用一个变异时，它总是告诉我

未定义的局部变异

。我甚至不能在存储上调度一个动作，我必须映射该动作并调用它。有什么特别的原因吗？@RutwickGangurde也许你没有添加将名称空间前缀替换为您直接调用的变体的名称。啊哈，很有趣。让我试试。