Vuejs: В компоненте не обновляются данные при изменении данных в хранилище. В чём может быть причина?

Всем привет. Такая проблема: есть некий компонент:

<template>
    <div>
        <ul v-for="(user, index) in users.items" :key="index">
            <li>{{ user.name }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'UserList',

        mounted() {
            this.fetchUsers()
        },

        computed: {
            users() {
                return this.$store.getters.users
            }
        },

        methods: {
            fetchUsers() {
                this.$store.dispatch('FETCH_USERS')
            }
        }
    }
</script>


Есть некое хранилище (разделено на модули):

import Vue from 'vue'
import Vuex from 'vuex'

import Users from './store/users'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: { Users }
})


// А это сам модуль "Users"

const state = {
    users: {
        items: [],
        total_items: 0
    }
}

const getters = {
    users: state => state.users
}

const actions = {
    FETCH_USERS ({commit}) {
        fetch(new URL('...'))
            .then(response => response.json())
            .then(response => commit('SET_USERS', response))
            .catch(...)
    }
}

const mutations = {
    SET_USERS (state, users) {
        state.users = users
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}


В данном примере, при переходе на страницу список пользователей будет пустой, т.к. изначально в хранилище ничего нет, а данные с сервера ещё не успели загрузиться. Когда они будут загружены, список всё-равно останется пустой, но при повторном переходе данные отобразятся. Очевидно, что сломалась реактивность. Из-за чего это может быть? Что я забыл?
  • Вопрос задан
  • 167 просмотров
Пригласить эксперта
Ответы на вопрос 2
andrhohlov
@andrhohlov
Frontend developer
Попробуйте так:

SET_USERS (state, users) {
  state.users.splice(0, state.users.length, ...users.items);
  state.total_items = users.total_items;
}
Ответ написан
@akass
Developer
Так а VueDevTools что показывают в хранилище?
используйте namespaced модули и mapGetters
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
18 авг. 2018, в 18:35
1000 руб./за проект
18 авг. 2018, в 17:54
6000 руб./за проект
18 авг. 2018, в 18:44
350 руб./за проект