Answer the question
In order to leave comments, you need to log in
Is the approach correct (vuex)?
Hello everyone, tell me if I understood the vuex logic correctly and implemented it, otherwise there are doubts.
Component:
<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});
}
},
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question