Store in Vue.js is a container and holds state. If you are familiar with React-Redux, store basically works in a similar way that you whatever you stored in store container you could be able to use this store’s element in every component or container that we make for our app and this functionality gives us easiness to carry over a state’s part that we need more than one component. It is like real store that more that one people go in to store and get what they need.
Let’s explain store concept with an example;
In My store index, I have some data, called myRentals, and products.
We are goin to do is carrying these methods and states to any component we would like.
So let’s start carrying myRentals array which belongs to state.
in below example, I have pages > my-item.vue page, it is just a click button, when you click that button, that takes you to items that stored.
let’s get the myRentals to this page to show our object in this page. First,
we import mapState with this
import {mapState} from ‘vuex’
and then creating computed property, because we want to display the object.
on line 16, …mapState([‘myRentals]) carries the store myRentals state to this component.
That is it, then we could be able to do v-for for our item in line 3 and
taking the each item to MyItem component to display the characters like in picture 2.
Resources
