Question

我对mapstate所做的事情并不坚定，除此之外，还有什么......在它面前意味着什么。我并没有在指南中看到这一点与示例回购中一样多。

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

Answer 1

正如@Can Rau回答的那样，我将尝试更清楚地了解h3ll的扩展语法...在mapGetter，mapState和mapActions中的实际作用Vuex。

首先，当您没有任何本地计算属性时，可以直接将mapState用作：computed: mapState，而无需使用扩展语法...。

与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的解释很清楚。深入了解一下，您就会明白。

Answer 2

使用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

Vuex中有三个句点语法？

2 个答案: