jackmarston
@jackmarston
human

Как передать данные из setup() в data() в компоненте Vue?

Не могу передать массив с данными. Хотя если вывести напрямую в компоненте userStore.news то данные выводятся. В Pinia сторе это выглядит так.

const news = ref([])
return {news}


Хочу чтобы data() news получал дефолтные данные которые уже сформированы в сторе.

export default {
  setup() {
    const userStore = useStore() //store Pinia
    return { userStore}
  },
  data() {
    const news = this.userStore.news
    return {
      news: news//в компоненте получаю [] //this.userStore.news тоже самое
    }
  },
  • Вопрос задан
  • 191 просмотр
Решения вопроса 1
i229194964
@i229194964
Веб разработчик
можно воспользоваться вычисляемым свойством (computed property).
<template>
  <div>{{ news }}</div>
</template>

<script>
import { useStore } from 'pinia'

export default {
  setup() {
    const userStore = useStore() // store Pinia

    // создание вычисляемого свойства для передачи данных из setup() в data()
    const newsData = computed(() => {
      return userStore.news
    })

    // возвращаемые значения
    return {
      newsData
    }
  },
  data() {
    return {
      news: []
    }
  },
  // наблюдатель изменения вычисляемого свойства
  watch: {
    newsData(val) {
      this.news = val
    }
  }
}
</script>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
jackmarston
@jackmarston Автор вопроса
human
Оставлю здесь как еще один вариант, мало ли кому пригодится.

import { storeToRefs } from 'pinia'
import { useStore } from '@/store/userStore'

export default {
  setup() {
    const userStore = useStore()
    const { news, user } = storeToRefs(userStore)
    return { userStore, news, user }
  },
  data() {
    return {
      postOpen: false,
      postNews: null,
      postTitle: null,
      postContent: null,
      createNews: false,
      editNews: false,
      loadedPosts: 5,
      alert: null,
    }
  }
}
<template>
{{ news }} //Можно работать сразу в шаблоне
</template>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы