Почему то реактивные классы не всегда реактивны. Происходит мутация во vuex, перехожу в эту компоненту, а реактивные классы обновляются почему то не сразу, а при каком-то действии в компоненте( то есть при updated)
Как сделать, чтобы обновлялись сразу при изменении состояний во vuex?
Вот шаблон с реактивными классами
<div v-for="access in accessUnits" :key="access.id" class="action-item-box" @click="activeAccess(access.id)" :class="{'active-action': currentAccess === access.id}">
<div class="action-item">
<div class="item-value"
:class="{'checked-all': access.checkedAccess === 'all', 'checked-none': access.checkedAccess === 'none', 'checked-some': access.checkedAccess === 'some' }"
@click="toggleAccessUnits(access.id)"
></div>
<div class="item-title">{{access.title}}</div>
</div>
</div>
получение данных из vuex через computed
computed:{
accessUnits(){
return this.$store.state.administration.accessUnits
}
}
и вот мутация, которая вызывается при клике на новую роль (далее чтобы отобразить все данные что тут считаются нужно перейти в другой компонент( с - он нужен, убирать нельзя), где собственно и не проставляются вовремя реактивные классы)
компоненты
mutations: {
getUserAccess(state, roleId) {
for (let i = 0; i < state.accessUnits.length; i++) { // сбрасываем галки на дефолтные - false
for (let j = 0; j < state.accessUnits[i].data.length; j++) {
state.accessUnits[i].data[j].is_available = false
}
}
let userAccessId = []
console.log('state.accessUnits: ', state.accessUnits);
if (!state.user){
let roleAccessUnits = state.roles.find(role => role.id === roleId).access_units
userAccessId = roleAccessUnits.map(accessUnit => accessUnit.id)
}
else if (state.user && roleId){
if (roleId === state.user.role_id){
userAccessId = state.user.access_units.map(accessUnit => accessUnit.id)
}
else{
let roleAccessUnits = state.roles.find(role => role.id === roleId).access_units
userAccessId = roleAccessUnits.map(accessUnit => accessUnit.id)
}
}
for (let i = 0; i < state.accessUnits.length; i++) {
let countUnitsValue = 0
for (let j = 0; j < state.accessUnits[i].data.length; j++) {
if (userAccessId.includes(state.accessUnits[i].data[j].id)) {
state.accessUnits[i].data[j].is_available = true
countUnitsValue++
}
}
if (countUnitsValue == 0){
state.accessUnits[i].checkedAccess = 'none'
}
else if (countUnitsValue < state.accessUnits[i].data.length) {
state.accessUnits[i].checkedAccess = 'some'
}
else if (countUnitsValue == state.accessUnits[i].data.length) {
state.accessUnits[i].checkedAccess = 'all'
}
}
},
Простой
