Issue loading content from Vuex store.state on browser using vue-router

Question

After reading many examples and the documentation from Vue, Vuex and Vue-Router I did this project: https://jsfiddle.net/junihh/30wda1em/5/

Even all goes fine when I try to load a row from Post section, the value come empty from the Vuex store. Here the component:

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')
});

Here the component that update the state.currentPost value and call the "postcontent" component.

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')
});

Any help here? I'm stuck on that issue.

Sovalina Sovalina · Accepted Answer · 2019-03-07T23:31:07

You need to use a computed property to gather the information from your store with reactivity:

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

Also try to avoid mutating state outside mutation handler. You can add a mutation to set your currentPost like this:

<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
    }
  }
});

fiddle

Issue loading content from Vuex store.state on browser using vue-router

1 Answers