CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Steal1702
Steal1702

Reputation: 123

How to access data inside an object in all Components in Vue

I am new to Vue and got stuck with this thing. I want to Access data which is stored inside an Object in one of my components. I was trying to make a cart system for practice and hard coded data for few games to access it in the app. My code for the Object is below 

products: [
                { 
                    id: 1, 
                    name: 'Call of Duty: Modern Warfare',
                    price: 'Rs. 5,500',
                    shortDesc: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    description: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    inStock: 'yes',
                    availableQuantity: '100',
                    img: 'src/assets/img/codmw.jpg',
                },
                { 
                    id: 2, 
                    name: 'PlayerUnknowns Battlegrounds',
                    price: 'Rs. 600',
                    shortDesc: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    description: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    inStock: 'yes',
                    availableQuantity: '500',
                    img: 'src/assets/img/pubg.jpg',
                },
                { 
                    id: 3, 
                    name: 'GTA VI',
                    price: 'Rs. 10,000',
                    shortDesc: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    description: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    inStock: 'yes',
                    availableQuantity: '5',
                    img: 'src/assets/img/gta.jpg',
                }
            ]

The above data stays in the Shop.vue component and whenever the user clicks on "View Product" button, a seperate route for that particular Product gets called and I want to fetch the data of the particular game in that route. For that, I made a Button in Shop.vue itself as below 

<router-link 
    class="btn btn-primary" 
    :to="/view/ + game.id" 
    v-b-tooltip.hover title="View Product details">
    View Product
</router-link>

Now the button opens up a new route that goes to "view/ID" where ID is dynamic. I Access that dynamic ID in my view route with

this.$route.params.id

But now I need to know that how can I access the data where product ID is the dynamic ID above inside the ViewProduct.vue compoenent because the Product Object was in Shop.vue component?

Please help me with this

Upvotes: 1

Views: 1419

Answers (2)

healthy_meerkat
healthy_meerkat

Reputation: 132

Vuex would solve this for you. You can also pass props between components like this:

const router = new VueRouter({
  routes: [
    { path: '/view/ + game.id', component: ViewProduct.vue, props: { id:this.id } }
  ]
})

In the ViewProduct component:

export default {
        data() {
            return {

                },
            };
        },
        props: ['id'],     <===== *props*
        computed: {

        },
        methods: {
        },

You can access the props then from inside the ViewProduct component:

this.$props.id

Upvotes: 2

Radu Diță
Radu Diță

Reputation: 14201

Your best bet would be to use a global state for this.

The simplest way is to use Vuex.

You would set your products as the state and add a getter using method style access to get your product based on an id.

Upvotes: 0

Related Questions