在 vuejs/vuex 中觀察和變異

Question

所以我設法從state中watch一個元素，但我也想從狀態中更新一個元素。

這是我嘗試過的，但它不起作用：

<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 ...

2. 更新 - 我把它改成了這個，這有效。 但是，如果有人知道如何使第一個版本工作，請發表評論。 謝謝！

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

3. 更新 - 因為焦點沒有刪除樣式，所以我再次將其更改為：

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);
},

4. 更新 - 最終結果

 watch: {
  isXActive() {
    this.$store.commit("SET_STYLE_FOR_X", this.$store.state.isXActive);
  },

謝謝陳以利！！

Answer 1

你的代碼無效。 觀察者內部的isXActive是布爾類型（就像你在上面的評論中所說的那樣），商店中的styleForX是樣式輸入的樣式對象類型。 現在，當觀察者被觸發時，您將布爾類型發送到突變，並且突變將 styleForX 設置為布爾類型。

例如，您應該發送一個樣式字符串而不是布爾值

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

對象樣式類型的示例是{ color: 'red' } 。 這只是 js 對象在這里查看更多信息https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

Answer 2

在您的手表處理程序中，當您似乎打算調用this.$store.dispatch()時，您正在調用this.$store.commit .$store.commit。 commit運行一個突變。 dispatch運行一個動作。 您用於從布爾值計算樣式的代碼在操作中，因此您應該使用dispatch 。

也就是說，沒有理由在這里使用操作，因為您沒有任何異步代碼。 只需將樣式字符串的邏輯放在突變中而不是動作中。