使用vue-router在浏览器上加载Vuexstore.state的内容

Question

在阅读了Vue、Vuex和Vue路由器的许多示例和文档后，我完成了以下项目：https://jsfiddle.net/junihh/30wda1em/5/

当我尝试从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')
});

这里有人帮忙吗？我被困在那个问题上了。

Answer 1

您需要使用计算属性从您的商店收集信息，包括：

const PostContent = Vue.component('postcontent', {
  computed: {
    post() {
      return this.$store.state.currentPost
    }
  },
  template: getTemplate('#tpl-postcontent')
});

还要尽量避免在变异处理程序之外变异状态。您可以添加一个变异来设置currentPost，如下所示：

<template id="tpl-posts">
  ...
    <li v-for="row in rows" :key="row.id">
      <router-link :to="url_path" @click.native="openPost(row.id)">
        {{ row.title }}
      </router-link>
    </li>
  ...
</template>

const Posts = Vue.component('posts', {
  //...
  methods: {
    openPost: function(id)
    {
      this.$store.commit('SET_CURRENT_POST', id)
    }
  },
  template: getTemplate('#tpl-posts')
});

const store = new Vuex.Store({
  state: {
    dataAll: {},
    currentPost: {}
  },
  mutations: {
    SET_CURRENT_POST: function(state, id) {
      let post = state.dataAll.find(data => data.id === id)
      state.currentPost = post
    }
  }
});

小提琴