Часы и мутация в vuejs / vuex - PullRequest
Новая
       34

Часы и мутация в vuejs / vuex

0 голосов
/ 07 февраля 2020

Итак, мне удалось получить watch элемент из state, но я также хочу обновить элемент из состояния.

Это то, что я пытался, но он не работает: 

<template>
  <input :style="styleForX" ... />
</template>


// script in template file :: isXActive returns focus input = true/false
 watch: {
  isXActive: (isXActive) => {
    console.log(123);
    this.$store.commit("SET_STYLE_FOR_X", isXActive);
  },
},
computed: {
  ...mapGetters([
    "styleForX",
]);


// state.js
export default state = {styleForX: ""}

// getters.js
styleForX: (state) => {
  return state.styleForX;
},

// action.js
SET_STYLE_FOR_X({commit}, isXActive) {
  const style = isXActive? {backgroundColor: "white", zIndex: "51"} : "";
  commit("SET_STYLE_FOR_X", style);
},


// mutation.js
SET_STYLE_FOR_X(state, styleForX) {
  state.styleForX= styleForX;
}

Каждый файл js имеет оператор export default. Есть идеи, как мне заставить это работать?

  1. Обновление:

Изменен код на: 

 watch: {
  isXActive: () => {
    this.$store.commit("SET_STYLE_FOR_X", {backgroundColor: "white", zIndex: "51"});
  },

, но все равно не работает. Я получаю this как undefined, поэтому я получаю эту ошибку: 

Error in callback for watcher "isXActive": "TypeError: Cannot read property '$store' of undefined" found in ...
Обновление - я изменил это на это, и это работает. Но если кто-то знает, как заставить работать первую версию, оставьте комментарий. Спасибо! 
created() {
  this.$store.watch(
    () => this.$store.state.isXActive,
    () => {
      this.$store.commit("SET_STYLE_FOR_X", {backgroundColor: "white", zIndex: "51"});
    }
  );
}
Обновление - поскольку стиль не был удален при фокусировке, я снова изменил его на: 
created() {
  this.$store.watch(
    () => this.$store.state.isXActive,
    () => {
      this.$store.dispatch("SET_STYLE_FOR_X", isXActive);
    }
  );
}

// action.js
SET_STYLE_FOR_X({commit}, isXActive) {
  const style = isXActive? {backgroundColor: "white", zIndex: "51"} : "";
  commit("SET_STYLE_FOR_X", style);
},
Обновление - конечный результат 
 watch: {
  isXActive() {
    this.$store.commit("SET_STYLE_FOR_X", this.$store.state.isXActive);
  },

Спасибо, eli chen !!

Ответы [ 2 ]

2 голосов
/ 07 февраля 2020

Ваш код неверен. isXActive внутри наблюдателя - логический тип (как вы сказали в комментарии выше) и styleForX из магазина - тип объекта стиля для стиля ввода. теперь, когда watcher получил триггер, вы отправляете булевский тип для мутации, и мутация устанавливает styleForX на булев тип.

вы должны послать строку стиля, а не логическое значение, например 

watch: {
  isXActive: function() {
    this.$store.commit("SET_STYLE_FOR_X", {backgroundColor: "white", zIndex: "51"});
  }
}

пример тип объекта стиля { color: 'red' }. это просто js объект, посмотрите здесь для получения дополнительной информации https://vuejs.org/v2/guide/class-and-style.html#Binding -Inline-Styles

1 голос
/ 07 февраля 2020

В вашем обработчике часов вы звоните this.$store.commit, когда кажется, что вы намереваетесь вызвать this.$store.dispatch(). commit запускает мутацию. dispatch запускает действие. Ваш код для расчета стиля по логическому значению находится в действии, поэтому вы должны использовать dispatch.

Тем не менее, здесь нет смысла использовать действие, поскольку у вас нет асинхронного кода , Просто поместите логи c для строки стиля внутри мутации, а не в действии.

...