Vuejs2 使用vue路由器从浏览器上的Vuex store.state加载内容时出现问题

在阅读了Vue、Vuex和Vue路由器的许多示例和文档后，我完成了以下项目：

当我尝试从Post部分加载一行时，即使一切正常，Vuex存储中的值也是空的。以下是组件：

const PostContent = Vue.component('postcontent', {
    data() {
        return {
            post: this.$store.state.currentPost
            // post: {
            //     title: 'The title',
            //     content: 'The content for test.'
            // }
        }
    },
    template: getTemplate('#tpl-postcontent')
});

这里是更新state.currentPost值并调用postcontent组件的组件

const Posts = Vue.component('posts', {
    data() {
        return {
            url_path: '/posts/content',
            rows: this.$store.state.dataAll
        }
    },
    methods: {
        openPost: function(e)
        {
            let rowID = e.currentTarget.getAttribute('data-rowid');

            let dataAll = this.$store.state.dataAll;
            let currentPost = dataAll.filter(row => (row.id == rowID))[0];

            this.$store.state.currentPost = currentPost;
        }
    },
    template: getTemplate('#tpl-posts')
});

---

有人帮忙吗？我对这个问题束手无策。

您需要使用一个计算属性从您的商店收集信息：

const PostContent=Vue.component'PostContent'{ 计算：{ 职位{ 返回此项。$store.state.currentPost } }, 模板：getTemplate'tpl-postcontent' }; 还要尽量避免在变异处理程序之外变异状态。您可以添加一个变体来设置currentPost，如下所示：

... {{row.title}} ... const Posts=Vue.component'Posts'{ //... 方法：{ openPost:functionid { 此.$store.commit'SET\u CURRENT\u POST'，id } }, 模板：getTemplate'tpl-posts' }; const store=新的Vuex.store{ 声明：{ dataAll:{}， currentPost:{} }, 突变：{ 设置当前职位：功能状态，id{ 让post=state.dataAll.finddata=>data.id==id state.currentPost=post } } };

---

哇，你的回答给了我比我期望的更多的东西。我真的很感谢你的帮助。非常感谢@Sovalina：-