Laravel vue.js 和 vuex 通过 id 链接正文文本并显示在新组件中

Question

我对 Laravel 和 Vuex 很陌生，我的页面上有一组简单的帖子。

测试 1

测试 2

测试 3

我正在尝试链接 AppPost.vue 组件上的文本，并在同一页面上显示已单击新组件 (AppShowpost.vue) 的帖子。我相信我必须通过 id 获取帖子并更改状态？任何帮助都会很好。谢谢。

当您单击测试 1 时，它将在新组件 (AppShowpost.vue) 上显示“测试 1”

在我的商店 timeline.js 中，我相信我需要通过 id 获取帖子并更改状态？

import axios from 'axios'

export default {
    namespaced: true,

    state: {
        posts: []
    },

    getters: {
        posts (state) {
            return state.posts
        }
    },

    mutations: {
        PUSH_POSTS (state, data) {
            state.posts.push(...data)
        }
    },

    actions: {
        async getPosts ({ commit }) {
            let response = await axios.get('timeline')

            commit('PUSH_POSTS', response.data.data)
        }
    }
}   

我的 AppTimeline.vue 组件

<template>
    <div>
        <app-post
            v-for="post in posts"
            :key="post.id"
            :post="post"
        />
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        computed: {
            ...mapGetters({
                posts: 'timeline/posts'
            })
        },
        
        methods: {
            ...mapActions({
                getPosts: 'timeline/getPosts'
            })
        },

        mounted () {
            this.getPosts()
        }
    }
</script>

我的 AppPost.vue 组件。我需要链接 post.body 以在我的 AppShowpost.vue 组件中显示帖子。

<template>
    <div class="w-full inline-block p-4">
       <div class="flex w-full">
            <p>
              <a href="#" @click.prevent="">  {{ post.body }} </a>
            </p>
       </div>
    </div>
</template>

<script>
    export default {
        props: {
            post: {
                required: true,
                type: Object
            }
        }
    }
</script>

我的 AppSowpost.vue 组件需要显示被点击的帖子。

<template>
    <div>
        // Displaypost ?
    </div>
</template>

<script>
    export default {
        // Get post from id ?
    }
</script>

Answer 1

好的，你可以在你的 vuex“current_state”中创建一个新状态，正如你所说，你可以通过将 id 传递给 vuex 来调度一个突变。

 state: {
    posts: [],
    current_state_id : null
},

在你的突变中

 set_state_id (state, data) {
    state.current_state_id = data;
 }

在您的应用 post.vue 上，您可以设置一个计算属性来监视当前状态

computed: {
  currentState() {
    return this.$store.getters["timeline/current_state_id"];
}}

并为计算属性创建一个观察者来显示当前的id/post

watch: {
  currentState: function(val) {
   console.log(val);
},

Answer 2

也许这会对你有所帮助。首先我会推荐使用router-link。如果您有兴趣，请阅读路由器链接here。它非常有用且易于使用。但是您必须在我们的 vue-route 上定义 url 并传递参数（见下文）。

1。您可以将 post.body 包装在 router-link 中，如下所示。

//With this approach, you don't need any function in methods
<router-link :to="'/posts/show/' + post.id">
     {{ post.body }}
</router-link>

2. 在您的 AppSowpost.vue 组件中，您可以根据以下 url 参数找到处于 vuex 状态的帖子。

<template>
  <div> {{ thisPost.body }} </div>
</template>

// ****************

computed: {
  ...mapState({ posts: state=>state.posts }),

// Let's get our single post with the help of url parameter passed on our url
thisPost() { return this.posts.find(p => p.id == this.$route.params.id) || {}; }
},

mounted() { this.$store.dispatch("getPosts");}

3。让我们定义我们的 vue 路由。

path: "posts/show/:id",
name: "showpost",
params: true, // Make sure the params is set to true
component: () => import("@/Components/AppShowPost.vue"),

你的 Mutations 应该像这样简单。

mutations: {
    PUSH_POSTS (state, data) {
        state.posts = data;
    }
},

请告诉我进展如何。