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

Question

[Alex D]

Не могу передать массив с данными. Хотя если вывести напрямую в компоненте 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 тоже самое
    }
  },

Answer 1

[Taulan Khatuaev]

можно воспользоваться вычисляемым свойством (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>

Comments

[Alex D]

Да, это сработало. Спасибо!

[RAX7]

По моему это делается гораздо проще с использованием storeToRefs

[Alex D]

RAX7, Спасибо, получилось. правда по гайду на En ютубе))

Answer 2

[Alex D]

Оставлю здесь как еще один вариант, мало ли кому пригодится.

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>