Как получить доступ к данным внутри объекта во всех компонентах в Vue

Question

Я новичок в Vue и застрял с этой штукой. Я хочу получить доступ к данным, которые хранятся внутри объекта в одном из моих компонентов. Я пытался создать систему тележек для практики и жестко закодированные данные для нескольких игр, чтобы получить к ним доступ в приложении. Мой код для объекта:

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',
                }
            ]

. Вышеуказанные данные остаются в компоненте Shop. vue, и всякий раз, когда пользователь нажимает кнопку «Просмотреть продукт», вызывается отдельный маршрут для этого конкретного продукта и Я хочу получить данные конкретной игры на этом маршруте. Для этого я сделал кнопку в магазине. vue, как показано ниже

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

Теперь кнопка открывает новый маршрут, который идет к «view / ID», где ID - это динамический c. Я получаю доступ к этому идентификатору Dynami c в моем маршруте просмотра с помощью

this.$route.params.id

Но теперь мне нужно знать, как я могу получить доступ к данным, где идентификатор продукта - это идентификатор Dynami c внутри ViewProduct. vue компонент, поскольку товарный объект был в магазине. vue компонент?

Пожалуйста, помогите мне с этим

Answer 1

Vuex решит эту проблему за вас. Вы также можете передавать реквизиты между компонентами следующим образом:

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

В компоненте ViewProduct:

export default {
        data() {
            return {

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

        },
        methods: {
        },

Затем вы можете получить доступ к реквизитам изнутри компонента ViewProduct:

this.$props.id

Answer 2

Лучше всего использовать для этого глобальное состояние.

Самый простой способ - использовать Vuex .

Вы должны установить products как состояние и добавьте геттер, используя доступ к стилю метода , чтобы получить ваш продукт на основе идентификатора.