How do I pass a parameter to pinia getter in vue? - vue.js

Question

Here is my ThreadsStore
import { defineStore } from "pinia";
import sourceData from "#/data.json";
import { useUsersStore } from "../stores/UsersStore";
import { usePostsStore } from "../stores/PostsStore";
import { useForumsStore } from "../stores/ForumsStore";
import { findById, upsert } from "#/helpers";
export const useThreadsStore = defineStore("ThreadsStore", {
state: () => {
return {
threads: sourceData.threads,
};
},
getters: {
thread: (state) => {
return (id) => {
const thread = findById(state.threads, id);
return {
...thread,
get author() {
return findById(useUsersStore().users, thread.userId);
},
get repliesCount() {
return thread.posts.length - 1;
},
get contributorsCount() {
return thread.contributors.length;
},
};
};
},
},
actions: {
async createThread({ text, title, forumId }) {
const id = "ggqq" + Math.random();
const userId = useUsersStore().authId;
const publishedAt = Math.floor(Date.now() / 1000);
const thread = { forumId, title, publishedAt, userId, id };
this.threads.push(thread);
this.appendThreadToUser({ userId, threadId: id });
this.appendThreadToForum({ forumId, threadId: id });
usePostsStore().createPost({ text, threadId: id });
return findById(this.threads, id);
},
async updateThread({ title, text, id }) {
const thread = findById(this.threads, id);
const post = findById(usePostsStore().posts, thread.posts[0]);
const newThread = { ...thread, title };
const newPost = { ...post, text };
this.setThread({ thread: newThread });
this.setPost({ post: newPost });
return newThread;
},
appendThreadToForum({ forumId, threadId }) {
const forum = findById(useForumsStore().forums, forumId);
forum.threads = forum.threads || [];
forum.threads.push(threadId);
},
appendThreadToUser({ userId, threadId }) {
const user = findById(useUsersStore().users, userId);
user.threads = user.threads || [];
user.threads.push(threadId);
},
setPost({ post }) {
upsert(usePostsStore().posts, post);
},
setThread({ thread }) {
upsert(this.threads, thread);
},
},
});
Here is my page
<template>
<div class="col-large push-top">
<h1>
{{ thread.title }}
<router-link
:to="{ name: 'ThreadEdit', id: this.id }"
class="btn-green btn-small"
>
Edit Thread
</router-link>
</h1>
<p>
By <a href="#" class="link-unstyled">{{ thread.author.name }}</a
>, <AppDate :timestamp="thread.publishedAt" />.
<span
style="float: right; margin-top: 2px"
class="hide-mobile text-faded text-small"
>{{ thread.repliesCount }} replies by
{{ thread.contributorsCount }} contributors</span
>
</p>
<post-list :posts="threadPosts" />
<post-editor #save="addPost" />
</div>
</template>
<script>
import { mapState, mapActions } from "pinia";
import { useThreadsStore } from "../stores/ThreadsStore";
import { usePostsStore } from "../stores/PostsStore";
import PostList from "#/components/PostList";
import PostEditor from "#/components/PostEditor";
export default {
name: "ThreadShow",
components: {
PostList,
PostEditor,
},
props: {
id: {
required: true,
type: String,
},
},
computed: {
...mapState(useThreadsStore, ["threads", "thread"]),
...mapState(usePostsStore, ["posts"]),
threadPosts() {
return this.posts.filter((post) => post.threadId === this.id);
},
},
methods: {
...mapActions(usePostsStore, ["createPost"]),
addPost(eventData) {
const post = {
...eventData.post,
threadId: this.id,
};
this.createPost(post);
},
},
};
</script>
In my computed I would like to map thread from my store for use in the template. I have not been able to figure out how to pass the id parameter to pinia properly in order to get it to return the thread properly.
The tutorial I am following along with uses vuex but I wanted to figure out how to use pinia so the conversion has been somewhat confusing

Answer 1

For anyone who might have something similar in the future. You can pass in a value to a getter like so
...mapState(useThreadsStore, {
thread(store) {
return store.thread(this.id);
},
}),