Question

我只想编辑和保存json中的内容

跟随下一个question 我使用深度克隆来克隆我的数据并在计算对象中进行编辑，然后将其发送到Vuex上的中央对象

该代码仅适用于第一次，我可以编辑数据，然后按编辑键，它会更改数据...但是如果尝试再次编辑...，我会收到错误消息

[Vue警告]：监视程序的回调发生错误“ function（）{return this._data。$$ state}”：“错误：[vuex]不在变异处理程序之外变异vuex存储状态。”

component.js

<template>
  <div class="hello">
    <form @submit.prevent="saveForm();">
      <input type="text" v-model="contentClone.result" />
      <button type="submit">edit</button>
      <p>{{ contentClone.result }}</p>
    </form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      content: {},
      contentClone: {}
    };
  },

  methods: {
    saveForm(event) {
      this.$store.dispatch("UPDATE_CONTENT", this.contentClone);
    }
  },

  beforeMount() {
    this.contentClone = JSON.parse(this.contentState);
  },

  computed: {
    contentState() {
      return JSON.stringify({ ...this.$store.getters["getContent"] });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

store.js

import {
  UPDATE_CONTENT
} from "../actions/user";
import Vue from "vue";

const state = {
  content: { result: "original content" },
  status: String,
  errorMessage: []
};

const getters = {
  getContent: state => state.content
};

const actions = {
  [UPDATE_CONTENT]: ({ commit }, payload) => {
    commit(UPDATE_CONTENT, payload);
  }
};

const mutations = {
  [UPDATE_CONTENT]: (state, payload) => {
    Vue.set(state, "content", payload);
  }
};

export default {
  state,
  getters,
  actions,
  mutations
};

我在上面的链接中复制了错误， https://codesandbox.io/s/p7yppolw00

如果我可以在保存后立即重新启动组件中的内容，我认为这可能会解决错误

Answer 1

您正在将对象http://services.gradle.org/distributions/gradle-4.1-all.zip保存为状态，该对象进一步与package test; import org.openqa.selenium.*; import org.openqa.selenium.firefox.FirefoxDriver; import javax.swing.JOptionPane; import javax.swing.JDialog; import java.util.List; import java.util.Objects; import java.util.Scanner; public class automationtest { static WebDriver driver; public static void main(String[] args) { String projectLocation = System.getProperty("user.dir"); System.setProperty("webdriver.gecko.driver", projectLocation+"\\lib\\Geckodriver\\geckodriver.exe"); System.setProperty("webdriver.firefox.bin", "C:\\Program Files\\Mozilla Firefox\\firefox.exe"); driver = new FirefoxDriver(); driver.navigate().to("some webside"); //didnt put the url in for this post //..... //doing loads of stuff on the webside (works perfectly fine) //..... //calling for the 2nd methode methode_two(value1,value2,value3,value4); } //this method gets called correctly, but it opens its own browser instance, even though i want it to work on the one the main method did public static void methode_two(int value1,int value2,int value3,int value4) { //doing some stuff on the webside //just a example line: driver.findElement(By.cssSelector("div.field:nth-child(5) > input:nth-child(1)")).click(); //works like a charm in the main method } }绑定，这使得输入能够通过this.contentClone直接对vuex存储进行更改，从而导致错误；当input进入vuex状态时，一个简单的解决方案就是克隆v-model：

this.contentClone

或者，IMO更好的解决方案是将结果以字符串形式分发，而不是使用对象。请参见工作示例：https://codesandbox.io/s/mmpr4745z9

使用VUEX在VUE上单击事件后，如何编辑数据？

1 个答案: