Laravel vue.js 및 vuex 본문 텍스트를 ID별로 링크하여 새 구성 요소에 표시

Laravel vue.js 및 vuex 본문 텍스트를 ID별로 링크하여 새 구성 요소에 표시

저는 Laravel과 Vuex에 매우 익숙하지 않습니다. 제 페이지에 간단한 게시물이 있습니다.

테스트 1

테스트 2

테스트 3

AppPost에 있는 텍스트를 링크하려고 합니다.vue 구성 요소와 새 구성 요소(AppShowpost.vue)에서 클릭한 게시물을 동일한 페이지에 표시합니다.아이디로 게시물을 받아서 주를 바꿔야 한다고 생각해요?어떤 도움이라도 좋습니다.감사합니다.

테스트 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)
        }
    }
}   

나의 AppTimelinevue 성분

<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 컴포넌트포스트에 링크를 걸어야 합니다.본문을 클릭하여 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>

네, 말씀하신 대로 vuex "current_state"에 새로운 상태를 만들 수 있습니다.vuex에 ID를 전달하여 변환을 디스패치할 수 있습니다.

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

당신의 돌연변이에

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

앱 투고에.vue, 현재 상태를 감시하는 계산된 속성을 설정할 수 있습니다.

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

그리고 현재 ID/게시를 표시하기 위해 계산된 속성의 감시자를 만듭니다.

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

아마 이게 도움이 될 거야우선, 이 기능을 사용하는 것을 추천합니다.router-link라우터 링크에 대해서는, 여기를 참조해 주세요.그것은 매우 유용하고 사용하기 쉽다.단, vue-route에서 url 및 pass 파라미터를 정의해야 합니다(아래 참조).

1. 포장을 할 수 있습니다.post.bodyrouter-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: {
    PUSH_POSTS (state, data) {
        state.posts = data;
    }
},

어떻게 되어가고 있는지 알려주세요.

언급URL : https://stackoverflow.com/questions/62610128/laravel-vue-js-and-vuex-link-body-text-by-id-and-show-in-a-new-component