Я пытаюсь исследовать vuex, поэтому я пытаюсь получить счетчик или массив при удалении или добавлении значений к нему. Ниже приведены мои коды.

шаблон home.vue

<template>
    <div :class="page.class" :id="page.id">
        <h3>{{ content }}</h3>
        <hr>
        <p>Registered users count {{ unRegisteredUserCount }}</p>
        <ul class="list-unstyled" v-if="getUnRegisteredUsers">
            <li v-for="(unregistereduser, n) in getUnRegisteredUsers" @click="register(unregistereduser)">
                {{ n + 1 }}
                - {{ unregistereduser.id }} 
                {{ unregistereduser.fname }} 
                {{ unregistereduser.lname }}
            </li>
        </ul>
        <hr>
        <p>Registered users count {{ registeredUserCount }}</p>
        <ul class="list-unstyled">
            <li v-for="(registereduser, n) in getRegisteredUsers" @click="unregister(registereduser)">
                {{ n + 1 }}
                - {{ registereduser.id }} 
                {{ registereduser.fname }} 
                {{ registereduser.lname }}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'home',
        data () {
            return {
                page: {
                    class: 'home',
                    id: 'home'
                },
                content: 'This is home page'
            }
        },
        computed: {
            getUnRegisteredUsers() {
                if( this.$store.getters.getCountUnregisteredUsers ) {
                    return this.$store.getters.getAllUnRegisteredUsers;
                }
            },
            getRegisteredUsers() {
                if( this.$store.getters.getCountRegisteredUsers > 0) {
                    return this.$store.getters.getAllRegisteredUsers;
                }
            },
            unRegisteredUserCount() {
                return  this.$store.getters.getCountUnregisteredUsers;
            },
            registeredUserCount() {
                return  this.$store.getters.getCountRegisteredUsers;
            }
        },
        methods: {
            register(unregistereduser) {
                this.$store.commit({
                    type: 'registerUser', 
                    userId: unregistereduser.id
                });
            },
            unregister(registereduser) {
                this.$store.commit({
                    type: 'unRegisterUser', 
                    userId: registereduser.id
                });
            }
        },
        mounted: function() {

        }
    }
</script>

< Сильный > state.js

export default {
    unRegisteredUsers: [
        {
            id: 1001,
            fname: 'John',
            lname: 'Doe',
            state: 'Los Angeles',
            registered: false
        },
        {
            id: 2001,
            fname: 'Miggs',
            lname: 'Ollesen',
            state: 'Oklahoma',
            registered: false
        },
        {
            id: 3001,
            fname: 'Zoe',
            lname: 'Mcaddo',
            state: 'New York',
            registered: false
        },
        {
            id: 4001,
            fname: 'Jane',
            lname: 'Roberts',
            state: 'Philadelphia',
            registered: false
        },
        {
            id: 5001,
            fname: 'Ellen',
            lname: 'Jennings',
            state: 'Houston',
            registered: false
        },
        {
            id: 6001,
            fname: 'Joseph',
            lname: 'Reed',
            state: 'Boston',
            registered: false
        },
        {
            id: 7001,
            fname: 'Jake',
            lname: 'Doe',
            state: 'Portland',
            registered: false
        }
    ],
    registeredUsers: []
}

< Сильный > getters.js

export default {
    getAllUnRegisteredUsers(state) {
        return state.unRegisteredUsers;
    },
    getAllRegisteredUsers(state) {
        return state.registeredUsers;
    },
    getCountUnregisteredUsers(state) {
        return state.unRegisteredUsers.length;
    },
    getCountRegisteredUsers(state) {
        return state.registeredUsers.length;
    },
    getUserById(state) {

    }
}

< Сильный > mutations.js

export default {
    registerUser(state, payload) {
        //find user
        const user = _.find(state.unRegisteredUsers, {
            'id': payload.userId
        });

        // remove user from original array
        _.remove(state.unRegisteredUsers, {
            'id': payload.userId
        });

        // set user object key value
        user.registered = 'true';

        // add user to new array
        state.registeredUsers.push(user);

        console.log(state.registeredUsers.length + ' - registered users count');
    },
    unRegisterUser(state, payload) {
        //find user
        const user = _.find(state.registeredUsers, {
            'id': payload.userId
        });

        // remove user from original array
        _.remove(state.registeredUsers, {
            'id': payload.userId
        });

        // set user object key value
        user.registered = 'false';

        // add user to new array
        state.unRegisteredUsers.push(user);

        console.log(state.unRegisteredUsers.length + ' - unregistered users count');
    }
}

Во время загрузки страницы он правильно отображает количество массивов, но когда я удаляю значение для isteredUsers и unRegisteredUsers , счетчик не обновляется. Что мне здесь не хватает? Может кто-нибудь объяснить, и что я должен сделать, чтобы получить правильный счет? Благодарность

0
PenAndPapers 28 Авг 2017 в 03:48

3 ответа

Лучший ответ

Причина, по которой это не работает, заключается в том, что вы изменяете массив. Никогда не изменяйте массив. Вы потратите часы, пытаясь выяснить, почему нарушена реактивность.

Замените значение новым массивом, чтобы сохранить реактивность. Используйте _.filter или _.reject, как в примере ниже.

state.registeredUsers = _.reject(state.registeredUsers, {
    'id': payload.userId
});

Другой ответ от choasia неверен. Лодаш не проблема. Lodash очень полезен для Vuejs, вам просто нужно использовать функции, которые явно возвращают новый массив. Посмотрите документы Lodash в разделе «возврат», чтобы узнать, что он возвращает.

2
For the Name 28 Авг 2017 в 15:44

Изменить список или объект в vuejs (а также в vuex) можно с помощью tricky. из-за ограничения JavaScript.
Кажется, вы используете lodash для удаления элементов в массиве. Это вызовет конфликт с реактивностью Вуэйса. Смотрите здесь.
Если вы собираетесь удалить элемент в массиве, вам лучше использовать splice для этого.

1
choasia 28 Авг 2017 в 01:52

Чтобы добавить в коментарий For the Name по удалению содержимого из массива, используйте Vue.set при обновлении // добавления в массив.

updateItem(state, payload) {
    Vue.set(state.items, payload.index, payload.data);
}

См. Документацию здесь: https: // vuex .vuejs.org / руководство / mutations.html # мутация - наблюдение ви - s - реактивность - правила

1
user2305673 11 Дек 2018 в 18:35