How to handle dragAndDrop with global state, pinia store or useState nuxt?

[carlosvaldesweb]

Hello, i'm working with Nuxt 3 and useState in composable called useQuiz, i'm using deep components and i need to work with global state, the quiz variable has the follow structure:

export type Question = {
  id: string;
  quiz_id: number;
  question_type: QuestionType;
  question: string;
  description: string;
  time_limit: number;
  score: number;
  image: File;
  order: number;
  feedback: string;
  allows_multiple_answers: boolean;
  active: boolean;
  options: QuestionOption[];
};

export type Quiz = {
  id: number;
  user_id: number;
  course: Course;
  language: Language;
  text: TextResponse;
  title: string;
  description: string;
  slug: string;
  max_score: number;
  pass_score: number;
  questions: Question[];
  created_at: string;
};

Now i need to pass Quiz.value.questions and also after in another component i need to pass quiz.value.question.options, how can i handle?

I'm trying to to this, but i can't because i need to pass type Ref, but i can't because i lose the reactivity when i add a new item to quiz.questions or when i remove a question.

const { fetchQuiz, quiz, reOrderQuestion, moveQuestion } = useQuiz();
const { fetchQuestionTypes } = useQuestionTypes();
const { pending } = await useAsyncData(async () => {
  return await Promise.all([
    fetchQuiz(route.params.id as string),
    fetchQuestionTypes(),
  ]);
});
const parentRef = ref<HTMLElement | undefined>(undefined);

dragAndDrop({
  parent: parentRef,
  values: quiz.value?.questions,
});

[xlanex6]

Hi @carlosvaldesweb

I find a dirty solution, to update my pinia store

const shopStore = useShops()
const { updateImplementation, loadRack, loadRackForced } = shopStore
const { selectedShop } = storeToRefs(shopStore)


const [
  parent,
  racks] =
  useDragAndDrop(selectedShop.value.implementation, {
    draggingClass: 'bg-blue-800 text-white',
    handleEnd: ({ targetData }) => {
      const newOrderedArrValue = targetData.parent.data.enabledNodes.map(({ data }) => data.value) 
      selectedShop.value.implementation = newOrderedArrValue
      updateImplementation()
    },
    sortable: true,
  });
  

if it could help
OR
If you're already find a better option , let me knows