在 vuejs/vuex 中观察和变异答案

【问题标题】：Watch and mutation in vuejs/vuex在 vuejs/vuex 中观察和变异
【发布时间】：2020-05-23 15:49:20
【问题描述】：

所以我设法从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 语句。知道我应该如何让它工作吗？

更新：

将代码更改为：

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

谢谢陈立！！

【问题讨论】：

我修正了我的答案。如果您需要访问this，请不要在观察者中使用箭头功能。

标签： javascript vue.js vuex mutation

【解决方案1】：

您的代码无效。观察者内部的 isXActive 是 boolean 类型（就像你在上面的评论中所说的那样），商店中的 styleForX 是 style object type 用于样式输入。现在，当观察者被触发时，您向突变发送一个布尔类型，并且突变将 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

【讨论】：

【解决方案2】：

在您的手表处理程序中，当您似乎打算调用this.$store.dispatch() 时，您正在调用this.$store.commit。 commit 运行突变。 dispatch 运行一个动作。您用于从布尔值计算样式的代码在操作中，因此您应该使用dispatch。

也就是说，这里没有理由使用操作，因为您没有任何异步代码。只需将样式字符串的逻辑放在突变中而不是动作中。

【讨论】：