vuex - Vuex 中的三个句点语法？

Question

我对 mapstate 的作用不是很清楚，除此之外，它会......在它面前意味着什么。我在指南中没有像示例回购那样看到这一点。

computed: {
  ...mapState({
    messages: state => state.messages
  })
}

Answer 1

当您使用 Vuex 构建大型应用程序时，

您将不得不在一个地方管理您的商店，而不是将它们分开，

例如，您有一家大型商店，并且商店中有很多州：

const store =
{
    states: 
    {
        todo:
        {
             notes   : { ... },
             username: { ... },
             nickname: { ... }
        },
        checklist:
        {
             list: { ... }
        }
    } 
}

如果你想使用它们，你可以这样做

computed:
{
    ...mapState(['todo', 'checklist'])
}

所以你不必

computed:
{
    todo()
    {
        return this.$store.state.todo
    },
    checklist()
    {
        return this.$store.state.checklist
    }
}

然后像这样使用它们：

todo.notes
todo.usernames
checklist.list

Answer 2

正如@Can Rau 所回答的那样，我将尝试更清楚地了解 h3ll 是传播语法在 Vuex和Vuex 中的...实际作用。mapGettermapStatemapActions

首先，当您没有任何本地计算属性时，您可以直接使用mapStateas: computed: mapStatewithout Spread Syntax 。...

mapGetters和_mapActions

computed: mapState({
    count: state => state.count,
    },

computed: {
  ...mapState({
     count: state => state.count,
  })
}

以上两者都做完全相同的事情！

但是当你确实有任何本地计算属性时，你需要传播语法。

这是因为 mapState 返回一个对象。然后我们需要对象扩展运算符将多个对象合并为一个。

computed: {
  localComputed () { /* ... */ },
  // mix this into the outer object with the object spread operator
  ...mapState({
    // ...
  })
}

您可以在MDN中阅读有关在对象文字中传播的更多信息

基本上，在这种情况下，它用于合并对象

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}

//without ..., it will become wrong
let wrongCopy = {obj}
// wrongCopy is { {a: 1, b: 2, c: 3} } - not what you want

Vuex Docs非常清楚地解释了这一点。更深入地看一下，你就会明白这一点。