Проблема загрузки контента из Vuex store.state в браузере с использованием vue-router - PullRequest
Новая
       13

Проблема загрузки контента из Vuex store.state в браузере с использованием vue-router

0 голосов
/ 08 марта 2019

Прочитав много примеров и документации от Vue, Vuex и Vue-Router, я сделал этот проект: 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')
});

Любая помощь здесь? Я застрял в этом вопросе.

1 Ответ

1 голос
/ 08 марта 2019

Вам нужно использовать вычисленное свойство для сбора информации из вашего магазина с реактивностью: 

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

скрипка

...