0

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, но размер панелей не меняется, потому, что значения которые байндятся в атрибут размера, остаются не изменными (специально, чтобы отслеживать это, добавил вывод этих значений на странице) т.е. не работает реактивность.

В чём косяк может быть?

2 ответа 2

1

Первое, что хочется отметить по коду - это присутствие избыточного поля actions. Этот раздел нужен только для асинхронных операций (например, ajax запрос). Подобные конструкции this.$store.getters['localdata/getLeftPaneSize'] старайтесь выносить из разметки в cоmputed и methods поля.

Из хранилища описанного вами, видны только три параметра: left, right, transform. Все они относятся к стилям позиционирования, насколько я правильно это понял. В примере ниже transform не рассматривается.

К сожалению, я не знаю метода как реализовать в пределах одного файла компонентный подход, но в коде есть комментарии. Ну и, конечно же при компонентном подходе, удобнее использовать вспомогательные функции mapGetters в cоmputed поле и mapMutations в methods поле.

// Обычно все мутации выносятся в начало файла с модулем.
// Название файла, например: '/store/modules/panel.js'
// Чтобы при открытии файла, был виден список доступных мутаций модуля.

// !!! При компонентном подходе 'panel/...' - лишнее
const SET_TO_LEFT = 'panel/SET_TO_LEFT'
const SET_TO_RIGHT = 'panel/SET_TO_RIGHT'
const TOGGLE = 'panel/TOGGLE'

const panel = {
  // !!! Пространство имен доступно при компонентном подходе.
  // namespaced: true,
  state: {
    left: 0,
    right: 0
  },

  // Как видно в getters добавляем `px`.
  // Вдруг завтра захотим в `rem` задавать.
  getters: {
    left: state => state.left + 'px',
    right: state => state.right + 'px',
  },

  // Мутации: можно подобрать более понятный синоним - Сеттеры.
  mutations: {
    // Данные могут быть переданы, либо задаём по умолчанию.
    [SET_TO_LEFT](state, data = {}) {
      state.left = data.left || 10
      state.right = data.right || 90
    },
    // В этом примере передача данных обязательна.
    [SET_TO_RIGHT](state, data) {
      state.left = data.left
      state.right = data.right
    },
    // В этом примере жестко меняем состояние панели на противоположное.
    [TOGGLE](state) {
      state.left = state.left !== 10 ? 10 : 90
      state.right = state.right !== 90 ? 90 : 10
    }
  }
}

const store = new Vuex.Store({
  namespaced: true,
  modules: {
    // Список наших модулей.
    panel
  }
})

Vue.component('panel', {
  template: `<div class="panel" :style="{ left: left, right: right}">
            <h1 class="panel__title">{{ style }}</h1>
        </div>`,

  // ИМЕННО благодаря полю `computed` и достигается реактивность.
  computed: {
    left() {
      // !!! При компонентном подходе указывается 'this.$store.getters.left'
      return store.getters.left
    },
    right() {
      // !!! При компонентном подходе указывается 'this.$store.getters.right'
      return store.getters.right
    },
    style() {
      return `left: ${this.left}, right: ${this.right}`
    }
  }
})

new Vue({
  el: '#app',
  store,

  mounted() {
    // Инициируем начальное положение панели.
    this.setToLeft()
  },

  methods: {
    setToLeft() {
      // В этом примере передача данных НЕ обязательна.
      this.$store.commit('panel/SET_TO_LEFT')
    },

    setToRight() {
      // В этом примере передача данных обязательна.
      this.$store.commit('panel/SET_TO_RIGHT', {
        left: 90,
        right: 10
      })
    },

    toggle() {
      this.$store.commit('panel/TOGGLE')
    }
  }
})
.panel {
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: rgba(0, 0, 0, 0.1) 0 5px 5px 2px;
  background: rgba(200, 200, 200, 0.1);
  border-radius: 4px;
  background-image: linear-gradient(45deg, #8a3a7b, #ea6334);
  color: rgba(255, 255, 255, 0.8);
  height: 100%;
  position: absolute;
}

.panel__wrapper {
  position: relative;
  min-height: 188px;
  margin-top: 25px;
}

.panel__title {
  text-align: center;
}
<div id="app">
  <div class="btn__group">
    <button @click="setToLeft">SET_TO_LEFT</button>
    <button @click="setToRight">SET_TO_RIGHT</button>
    <button @click="toggle">TOGGLE</button>
  </div>
  <div class="panel__wrapper">
    <panel></panel>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

2
  • Большое спасибо за такой развернутый ответ. Реально очень признателен. Так то в целом советы правильные. Но у меня немного другая ситуация. То решение, которое вы предложили наверняка кому-то пригодится. А в моём случае дело было в другом: если кратко, то я споткнулся на взаимодействии компонентов между собой. И при более внимательном изучении доки по компоненту, выяснилось, что есть готовое решение этой проблемы - нужно было всего лишь дописать в тег компонента (который не попал в тот фрагмент, который я скинул) атрибут watch-slots 1 мая 2019 в 9:44
  • <splitpanes style="height: auto; position: relative" watch-slots v-if="component"> вот так 1 мая 2019 в 9:45
0

@click="() => this.$store.commit('localdata/leftminimize')" нельзя. @click="store.commit('localdata/leftminimize')" можно

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

Ещё вижу косяк. state - это объект, который должен быть стейтом. Я бы так это записал:

state: {
  init: {...initialState}
}

Тогда у тебя будет нормальная копия объекта.

9
  • Спасибо, сейчас попробую. А что не так с синтаксисом? Ошибки вообще ни одной нет. 30 апр 2019 в 8:35
  • Кстати говоря, та часть кода, которую ты предлагаешь изменить, работает. Т.е. дело не в нем. По клику мутация применяется, данные в state меняются, но атрибуты в которые я забайндил эти state остаются такими же. 30 апр 2019 в 8:40
  • @ЕвгенийЖигульский, да у вас, извиняюсь, бардак в коде. Выносите все this.$store.getters['localdata/getLeftPaneSize'] в computed поле.
    – user256824
    30 апр 2019 в 8:45
  • @РустамГимранов бардак в чём? в том что в атрибуты пишу конструкции типа:this.$store.getters['localdata/getLeftPaneSize']? За ответ спасибо 30 апр 2019 в 8:49
  • 1
    И да, насчёт компьютед свойств правильно говорят. Держи все такие вещи в них. И я не понимаю как у тебя работает вот всё то в html. Там нет доступа к this. Как это происходит, не понимаю. 30 апр 2019 в 8:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.