Vue.js - Vuex mapState（State）

最新推荐文章于 2024-09-03 20:15:00 发布

原创最新推荐文章于 2024-09-03 20:15:00 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

前端开发专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何在Vue中使用mapState结合对象展开运算符简化计算属性的编写。通过mapState获取store中的状态，并利用对象展开运算符将其与局部计算属性合并。

mapState

Object Spread Operator

Note that mapState returns an object. How do we use it in combination with other local computed properties? Normally, we'd have to use a utility to merge multiple objects into one so that we can pass the final object to computed. However with the object spread operator (opens new window), we can greatly simplify the syntax:

对象展开运算符

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符 (opens new window)，我们可以极大地简化写法：

オブジェクトスプレッド演算子

mapState はオブジェクトを返すことに注意しましょう。どうやって、他のローカル算出プロパティと組み合わせるのでしょうか？通常、最終的にひとつのオブジェクトを computed に渡せるように、複数のオブジェクトをひとつにマージするユーティリティを使わなければいけません。しかし、オブジェクトスプレッド演算子 (opens new window)で、シンタックスをかなり単純にできます:

객체 전개 연산자 (Object Spread Operator)

mapState는 객체를 반환합니다. 다른 로컬 영역의 계산된 속성과 함께 사용하려면 어떻게 해야 하나요? 일반적으로, 최종 객체를 computed에 전달할 수 있도록 여러 객체를 하나로 병합하는 유틸리티를 사용해야합니다. 그러나 객체 전개 연산자 (Object Spread Operator) (opens new window)을 사용하면 문법을 매우 단순화 할 수 있습니다.

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}