I hope you still remember the challenge we were facing at the beginning of this chapter. We would like to establish communication between the components in such a way that it would be easy to change the title of the shopping lists from the ChangeTitleComponent and propagate it to both ShoppingListTitle and ShoppingListComponent. Let's remove the hardcoded array of shopping lists from App.vue and copy it to the store's state:
//store.js
<...>
const state = {
shoppinglists: [
{
id: 'groceries',
title: 'Groceries',
items: [{ text: 'Bananas', checked: true },
{ text: 'Apples', checked: false }]
},
{
id: 'clothes',
title: 'Clothes',
items: [{ text: 'black dress', checked: false },
{ text: 'all-stars', checked: false }]
}
]
}
<...> &...