Правильный ли подход (vuex)?

Question

[Кирилл]

Правильно ли я понял логику vuex и реализовал ее? Есть сомнения.

Компонент

<div class="users-listblock">
                <div class="listblock" v-for="(user, userIndex) in allUsers" :key="user._id" :class="{ teacher: user.genre === 'teacher' }">
                    <div class="delete-listblock">
                        <button type="button" class="btn-close" aria-label="Close" @click="localDeleteUser(user._id, userIndex)"></button>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{ user.username }}</h5>
                            <p class="card-text">{{ user.spec.name }}</p>
                            <a href="#" class="btn btn-primary">{{ user.genre }}</a>
                        </div>
                    </div>
                </div>
            </div>

import {mapActions, mapGetters, mapMutations} from 'vuex';

export default {
  async mounted() {
        this.getUsers();
  },

  computed: {
        ...mapGetters([
            'allRooms',
            'allUsers',
            'allSpecs',
            'usersData',
            'roomsData',
            'specsData',
        ]),
    },
  methods: {
    ...mapActions([
            'getRooms',
            'getUsers',
            'getSpecs',
            'addUser',
            'deleteUser',
      ]),
      async localAddUser() {
            if (this.usersData.name && this.usersData.spec) {
                this.addUser({
                    name: this.usersData.name,
                    spec: this.usersData.spec._id,
                    genre: this.usersData.genre,
                });
            } else
                this.showAlert({
                    text: 'Заполните все поля',
                    status: 'danger'
                });
        },
  }
}

Хранилище

import Vue from 'vue';
import { send } from '../../tools.js';

export default {
    state: {
        users: {
            array: [],
            name: '',
            spec: null,
            genre: 'teacher',
        },
        rooms: {
            array: [],
            name: '',
        },
        specs: {
            array: [],
            name: '',
            genre: '',
            description: '',
        }
    },

    mutations: {
      updateUsers(state, users) {
            state.users.array = users;
      },

      updateAddUser(state, users) {
            state.users.array.unshift(users);
            state.users.name = '';
            state.users.spec = null;
            state.users.genre = 'teacher';
            console.log('add User', users);
        },

        updateDeleteUser(state, users) {
            Vue.delete(state.users.array, users.index);
            console.log('delete Table', users);
        },
    },

    getters: {
      allRooms(state) {
            return state.rooms.array;
        },

        allUsers(state) {
            return state.users.array;
        },

        allSpecs(state) {
            return state.specs.array;
        },

        usersData(state) {
            return state.users;
        },

        roomsData(state) {
            return state.rooms;
        },

        specsData(state) {
            return state.specs;
        },
    },

    actions: {
      async getRooms(ctx) {
            const res = await send('/settings/getrooms');

            ctx.commit('updateRooms', res.data);
        },

        async getUsers(ctx) {
            const res = await send('/settings/getusers');

            ctx.commit('updateUsers', res.data);
        },

        async getSpecs(ctx) {
            const res = await send('/settings/getspecs');

            ctx.commit('updateSpecs', res.data);
        },

        async addUser({ commit }, data) {
            const res = await send('/settings/adduser', {
                username: data.name,
                spec: data.spec,
                genre: data.genre,
            });
            
            if (res.status === 200) {
                commit('showAlert', {
                    text: res.message,
                    status: 'success'
                });
                commit('updateAddUser', res.data);
            }
        },

        async deleteUser({ commit }, data) {
            const res = await send('/settings/deleteuser', {
                userId: data.id,
            })
            
            if (res.status == 200) {
                commit('showAlert', {
                    text: res.message,
                    status: 'success'
                });
                commit('updateDeleteUser', {data: res.data, index: data.index});
            }
        },
    }
}

Comments

[monax33349]

А зачем ты используешь getters если просто берешь стор. Возьми mapState лучше.

[Кирилл]

monax33349, понял, спасибо, просто у меня там пара вычислительных геттеров есть, поэтому по аналогии возвращал

[monax33349]

https://habr.com/ru/post/440542/