如何在vue中传递一个参数给pinia getter?

jaql4c8m  于 2022-12-30  发布在  Vue.js
关注(0)|答案(1)|浏览(190)

这是我的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);
    },
  },
});

这是我的页面

<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>

在我的计算中,我想从我的存储中Map线程以在模板中使用。我一直无法弄清楚如何正确地将id参数传递给pinia,以便让它正确地返回线程。
我正在遵循的教程使用vuex,但我想弄清楚如何使用pinia,所以转换有点混乱

cygmwpex

cygmwpex1#

对于将来可能有类似情况的任何人。您可以像这样将值传递给getter

...mapState(useThreadsStore, {
      thread(store) {
        return store.thread(this.id);
      },
    }),

相关问题