Three periods syntax in Vuex?

Question

I'm not solid on what mapstate does, other than that, what would ... mean in front of it. I don't see this nowhere as much within the guide as in example repos.

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

Answer 1

When you are building a large application by using Vuex,

you would have to manage your store in one place instead of separate them,

for example you have a large store and there's many states in the store:

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

if you want to use them, you could just do this

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

so you don't have to

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

and then use them like this:

todo.notes
todo.usernames
checklist.list