vuejs / vuex中的监视和突变

Question

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

Answer 1

您的代码无效。观察者内部的isXActive是boolean type（就像您在上面的注释中所说的），而商店中的styleForX是string type，用于设置输入的样式。现在，当观察者触发时，您会向该突变发送一个布尔类型，并且该突变将styleForX设置为布尔类型。

例如，您应该发送样式字符串而不是布尔值

isXActive: (isXActive) => {
    console.log(123);
   // the isXactive hold the new value of isXActive which is boolean
    this.$store.commit("SET_STYLE_FOR_X", "send a style string here not a boolean");
  },

Answer 2

在您的监视处理程序中，您正在呼叫this.$store.commit，当您打算呼叫this.$store.dispatch()时。 commit运行突变。 dispatch运行一个动作。您需要根据布尔值计算样式的代码在操作中，因此您应该使用dispatch。

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