Извлечение данных исчезает из DOM при обновлении окна в Vuejs - PullRequest
Новая
       32

Извлечение данных исчезает из DOM при обновлении окна в Vuejs

0 голосов
/ 25 июня 2019

Я работаю над SPA с Vue, Vue-router и Vuex.Когда я нажимаю кнопку, чтобы показать все репо, я перехожу на маршрутизатор, где он показывает все репо пользователя, и он работает.Однако, когда я обновляю страницу, репо исчезают, и они не отображаются снова, если я не вернусь и снова не нажму кнопку.Я хотел бы удалить эту ошибку.

Я пытался вызвать вычисленный метод repos() в условном выражении, которое проверяет, обновлялось ли окно.

  • Первая попытка: 
computed: {
        ...mapGetters({
            profile: 'getProfile',
            getRepos: 'getRepos'
        }),
        repos() {
            if (this.searchRepos.length) {
                return this.searchRepos;
            } else {
                return this.getRepos;
            }
        },
        checkWindowState(){
            if (performance.navigation.type == 1) {

                console.info( "This page is reloaded" );this.repos();
            } else {
                console.info( "This page is not reloaded");
            }
        }
    },
  • Вторая попытка: 
computed: {
        ...mapGetters({
            profile: 'getProfile',
            getRepos: 'getRepos'
        }),
        repos() {
            if (performance.navigation.type == 1) {
                console.info( "This page is reloaded" );
                return this.getRepos;

            } else {
                console.info( "This page is not reloaded");
            }
        },
    },

HTML: 

            <div id="repo-list">
                <div v-if="!repos.length && isSearching"
                    class="empty-data"
                >
                    :-( Sad... No result found!
                </div>
                <template v-else>
                    <list-transition>
                        <repo-item
                            v-for="(repo, index) in repos"
                            :repo="repo"
                            :key="repo.full_name"
                            :data-index="index"
                        ></repo-item>
                    </list-transition>
                </template>
            </div>

import api from '../../api';
import * as types from '../mutation-types';

const state = {
    repos: []
};

const getters = {
    getRepos: state => state.repos
};

const actions = {
    setUserRepos({ commit }, username) {
        commit(types.INIT_REPOS);
        return api(
            'https://api.github.com/search/repositories' +`?q=user:${username}&sort=updated`
        ).then(data => data.items)
        .then(repos => {
            commit(types.SET_REPOS, {repos});
        })
    }
};

const mutations = {
    [types.INIT_REPOS](state) {
        state.repos = [];
    },
    [types.SET_REPOS](state, {repos}) {
        state.repos = repos;
    }
};

export default {
    state,
    getters,
    actions,
    mutations
};

Я пытаюсь сохранить отображение списка репо при обновлении объекта окна.

Вы можете найти репозиторий здесь

...