Приветствую.
Изучаю основы Vue3 в связке с Pinia и столкнулся с проблемой получения данные State во View.
Создал Сторадж src/stores/post.js
import { defineStore } from "pinia";
export const usePostStore = defineStore({
id: "post",
state: () => ({
posts: [],
loading: false,
error: null,
}),
actions: {
async fetchPosts() {
this.posts = [];
this.loading = true;
try {
this.posts = await fetch(
"https://jsonplaceholder.typicode.com/posts"
).then((response) => response.json());
} catch (error) {
this.error = error;
} finally {
this.loading = false;
}
},
},
});
Теперь во View пытаюсь получить данные State posts.
<script setup>
import { storeToRefs } from "pinia";
import { usePostStore } from "@/stores/post";
const postStore = usePostStore();
const { posts } = storeToRefs(postStore);
postStore.fetchPosts();
console.log(posts);
</script>
<template>
<div v-for="post in posts" :key="post.id">
<h1>
{{ post.title }}
</h1>
<p>
{{ post.body }}
</p>
</div>
</template>
При обращении через:
console.log(postStore.posts);
я получаю дефолтное состояние post, а именно пустой массив
[]
В template без проблем пробрасываются посты, но как получить данные постов после вызова метода fetchPosts()?
Я нашел только способ через Subscribe получить измененное состояние:
postStore.$subscribe((mutation, state) => {
console.log(mutation, state);
console.log(mutation.events.newValue.id);
});
Но мне кажется есть способ попроще.
Простой
