Vue.js 如何将post从一个组件转移到另一个组件？

下午好，请告诉我。我现在正在使用Vuex进行培训，无法将帖子从一个组件转移到另一个组件。我有一个组件分页，其中所有帖子和历史组件都存储在哪里，应该发送我点击访问它们的前5篇帖子。也就是说，它应该大致作为查看帖子的历史。我在这里写了一些代码，但是没有显示我的帖子，告诉我我做错了什么，以及如何修复它

存储所有帖子的组件代码：

    <template>
  <div class = "app">
    <ul>
      <li v-for="(post, index) in paginatedData" class="post" :key="index">
        <router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }" @click="addPostToHistoryComp(post.id, post.title, post.body)">
        <img src="src/assets/nature.jpg">
        <p class="boldText"> {{ post.title }}</p>
        </router-link>
        <p> {{ post.body }}</p>
      </li>
      </ul>
        <div class="allpagination">
          <button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
          <div class="pagin">
            <button class="item"
            v-for="n in evenPosts"
            :key="n.id"
            v-bind:class="{'selected': current === n.id}"
            @click="page=n-1">{{ n }} </button>
          </div>
          <button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
        </div>
      </div>
    </template>

    <script>
      import {mapState} from 'vuex'
      export default {
        name: 'app',
        data () {
          return {
            current: null,
            page: 0,
            visiblePostID: '',
          }
        },
        mounted(){
          this.$store.dispatch('loadPosts')
        },
        computed: {
          posts(){
            return this.$store.state.posts
          },
          search(){
            return this.$store.state.sSearch
          },
          evenPosts: function(posts){
            return Math.ceil(this.posts.length/6);
          },
          paginatedData() {
            const start = this.page * 6;
            const end = start + 6;
            return this.filteredPosts.slice(start, end);
          },
          filteredPosts() {
            return this.posts.filter((post) => {
              return post.title.match(this.search);
            });
          },
        },
        methods: {
          addPostToHistoryComp(val){
            this.$store.dispatch('transforPostToHistoryComp', { // как вызвать actions с объект с параметром
              pTitle: val.post.title,
              pBody: val.post.body,
              pId: val.post.id
            })
          },
        }
      }
    </script>

---

我发现发生了什么。文件Pagination.vue的代码有一些错误

你把@click放在

下面，这不起作用，因为路由器链接会在离开前更改页面，从而阻止任何其他事件的发生

我对模板和脚本做了一些更改。我想会有用的

    <template>
  <div class="app">
    <ul>
      <template v-for="(post, index) in paginatedData">
        <li class="post" :key="index" @click="addPostToHistoryComp(post)">
          <img src="src/assets/nature.jpg">
          <p class="boldText">{{ post.title }}</p>
          <p>{{ post.body }}</p>
        </li>
      </template>
    </ul>
    <div class="allpagination">
      <button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
      <div class="pagin">
        <button
          class="item"
          v-for="n in evenPosts"
          :key="n.id"
          v-bind:class="{'selected': current === n.id}"
          @click="page=n-1"
        >{{ n }}</button>
      </div>
      <button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
    </div>
  </div>
</template>

    <script>
import { mapState } from "vuex";
export default {
  name: "app",
  data() {
    return {
      current: null,
      page: 0,
      visiblePostID: ""
    };
  },
  mounted() {
    this.$store.dispatch("loadPosts");
  },
  computed: {
    posts() {
      return this.$store.state.posts;
    },
    search() {
      return this.$store.state.sSearch;
    },
    evenPosts: function(posts) {
      return Math.ceil(this.posts.length / 6);
    },
    paginatedData() {
      const start = this.page * 6;
      const end = start + 6;
      return this.filteredPosts.slice(start, end);
    },
    filteredPosts() {
      return this.posts.filter(post => {
        return post.title.match(this.search);
      });
    }
  },
  methods: {
    addPostToHistoryComp(post) {
      this.$store.dispatch("transforPostToHistoryComp", {
        pTitle: post.title,
        pBody: post.body,
        pId: post.id
      });

      this.$router.push({
        name: "detail",
        params: { id: post.id, title: post.title, body: post.body }
      });
    }
  }
};
</script>

{{post.title}
{{post.body}}



从“vuex”导入{mapState}；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
当前：空，
页码：0，
VisiblePosted:“
};
},
安装的（）{
这是$store.dispatch（“装货柱”）；
},
计算：{
员额（）{
返回此。$store.state.posts；
},
搜索（）{
返回此项。$store.state.sSearch；
},
职位：职能（职位）{
返回Math.ceil（this.posts.length/6）；
},
paginatedData（）{
const start=this.page*6；
const end=start+6；
返回这个.filteredPosts.slice（开始，结束）；
},
filteredPosts（）{
返回此.posts.filter（post=>{
返回post.title.match（this.search）；
});
}
},
方法：{
addPostToHistoryComp（post）{
此.$store.dispatch（“transforPostToHistoryComp”{
标题：post.title，
pBody:post.body，
pId:post.id
});
这是$router.push({
名称：“详情”，
参数：{id:post.id，title:post.title，body:post.body}
});
}
}
};

请举例说明。也许在JSFIDLE上，然后我们可以对它进行调试。我在GitHub中有完整的代码好的，我会看看这个，我会等待你的提示！我也有这样一个问题，当第一篇文章被添加到历史组件中时，它会正常显示，但是第二篇以及下面的所有内容都不会显示图片，这可能是什么问题？在历史文件中，将路径更改为：为什么这会有帮助？因为您引用的是路径“src”在src的内部，点表示您在您想要的基本路径的文件夹中。非常感谢

    export default new vuex.Store({
  state: {
    posts: [],
    sSearch: '',
    title: '',
    body: '',
    id: Number,
    historyPosts: []
  },
  actions: {
    loadPosts ({commit}) {
      axios.get('http://jsonplaceholder.typicode.com/posts').then(response => {
        let posts = response.data
        commit('SET_POSTS', posts)
      }).catch(error => {
        console.log(error);
      })
    },
    transforTitleAndBody({commit}, payload){ // мутация которая изменяет сосотаяние в sSearch
      const todo = {
        title: payload.sTitle,
        body: payload.sBody,
        id: payload.sId
      }
      axios.post('http://jsonplaceholder.typicode.com/posts', todo).then(_ => {
        commit('ADD_TODO', todo)
      }).catch(function (error) {
          console.log(error);
        })
    },
    transforPostToHistoryComp({commit}, payload){ // мутация которая изменяет сосотаяние в sSearch
      const todohistory = {
        title: payload.pTitle,
        body: payload.pBody,
        id: payload.pId
      }
      commit('ADD_TODO_HISTORY', todohistory)
    }
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts
    },
    transforSearch(state, payload){ // мутация которая изменяет сосотаяние в sSearch
      state.sSearch = payload
    },
    ADD_TODO (state, todoObject) {
      state.posts.unshift(todoObject)
    },
    ADD_TODO_HISTORY (state, todohistoryObject) {
      state.historyPosts.unshift(todohistoryObject)
    },
  },
})

    <template>
  <div class="app">
    <ul>
      <template v-for="(post, index) in paginatedData">
        <li class="post" :key="index" @click="addPostToHistoryComp(post)">
          <img src="src/assets/nature.jpg">
          <p class="boldText">{{ post.title }}</p>
          <p>{{ post.body }}</p>
        </li>
      </template>
    </ul>
    <div class="allpagination">
      <button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
      <div class="pagin">
        <button
          class="item"
          v-for="n in evenPosts"
          :key="n.id"
          v-bind:class="{'selected': current === n.id}"
          @click="page=n-1"
        >{{ n }}</button>
      </div>
      <button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
    </div>
  </div>
</template>

    <script>
import { mapState } from "vuex";
export default {
  name: "app",
  data() {
    return {
      current: null,
      page: 0,
      visiblePostID: ""
    };
  },
  mounted() {
    this.$store.dispatch("loadPosts");
  },
  computed: {
    posts() {
      return this.$store.state.posts;
    },
    search() {
      return this.$store.state.sSearch;
    },
    evenPosts: function(posts) {
      return Math.ceil(this.posts.length / 6);
    },
    paginatedData() {
      const start = this.page * 6;
      const end = start + 6;
      return this.filteredPosts.slice(start, end);
    },
    filteredPosts() {
      return this.posts.filter(post => {
        return post.title.match(this.search);
      });
    }
  },
  methods: {
    addPostToHistoryComp(post) {
      this.$store.dispatch("transforPostToHistoryComp", {
        pTitle: post.title,
        pBody: post.body,
        pId: post.id
      });

      this.$router.push({
        name: "detail",
        params: { id: post.id, title: post.title, body: post.body }
      });
    }
  }
};
</script>