const initialState = {
paneSizeRight: 10,
paneSizeLeft: 90,
paneSizeTransform: 20
};
export const localdata = {
namespaced: true,
state: initialState,
mutations: {
leftminimize: (state: any) => {
state.paneSizeRight = 90;
state.paneSizeLeft = 10;
},
rightminimize: (state: any) => {
state.paneSizeRight = 10;
state.paneSizeLeft = 90;
}
},
getters: {
getLeftPaneSize: (state: any) => {
return state.paneSizeLeft;
},
getRightPaneSize: (state: any) => {
return state.paneSizeRight;
}
},
actions: {
SET_SIZE: (context: any, payload: any) => {
context.commit("SET_SIZE", payload);
}
}
};
<div :splitpanes-size="this.$store.getters['localdata/getLeftPaneSize']" splitpanes-min="10">
<v-flex v-if="component" style="position: relative;">
<v-card class="app-card fill-height">
<div class="btn-minimize-left-pane" @click="() => this.$store.commit('localdata/leftminimize')">
{{ this.$store.getters['localdata/getLeftPaneSize'] }}
</div>
<component :is="availableComponents[component.Type]" :element="component" class="fill-height" />
</v-card>
</v-flex>
</div>
Короче есть панель, размер которой я пытаюсь менять мутацией.
Размер панели задаётся стейтом или геттером (не понял как правильнее), при клике на определённую область вызывается мутация, которая меняет значение стейтов. И всё вроде ок. Сам стейт меняется, я это вижу через vue dev tools, но размер панелей не меняется, потому, что значения которые байндятся в атрибут размера, остаются не изменными (специально, чтобы отслеживать это, добавил вывод этих значений на странице) т.е. не работает реактивность.
В чём косяк может быть?