Как хранить Vue. js данные компонентов в Vuex? - PullRequest
Новая
       104

Как хранить Vue. js данные компонентов в Vuex?

0 голосов
/ 08 февраля 2020

Я создаю конструктор ссылок, который позволяет людям делиться несколькими ссылками из одной ссылки. На данный момент у меня есть несколько «карточек», которые пользователи могут вставить в шаблон ссылки. Например, это позволяет им иметь ссылки на свои музыкальные файлы c на Spotify (одна карта) или ссылку на их канал Youtube (другая карта).

Я использую VueDraggable, чтобы позволить пользователям перетаскивать свои карты в свой шаблон ..

Screenshot of user interface

Что я не понимаю Как хранить компоненты карт в магазине, чтобы их можно было перетаскивать? На данный момент в моем магазине у меня есть все карты как объекты, так как VueDraggable нужно, чтобы данные были в 2 разных списках .. 

export const state = () => ({
    chosenCards: [
    ],
    defaultCards: [
        {id: 1, text: 'Twitter',  font: 'Arial',  destination: 'https://twitter.com/home', design: {color: '#1DA1F2', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1DA1F2', 'font-weight' : 600, font: 'Arial'}},
        {id: 2, text: 'Spotify',  font: 'Arial',  destination: 'https://twitter.com/home', design: {color: '#1db954', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1db954', 'font-weight' : 600, font: 'Arial'}},
        {id: 3, text: 'Youtube',  font: 'Arial',  destination: 'https://twitter.com/home', design: {color: '#c4302b', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#c4302b', 'font-weight' : 600, font: 'Arial'}},
    ],
})

Так что я фактически не использую какие-либо компоненты карт, которые я мы сделали. Я хочу иметь возможность создавать карты как компоненты, а не просто как объекты в моем магазине, и при этом иметь возможность перетаскивать их. Как мне go сделать это?

...