如何在 vue js 组件的类数据中推送数组？

Question

我的数据中有一个空的object，例如：

data: () => {
  return {
    lines: []
  }
}

我想从我在“mounted”中定义的函数中推入一些数组，构造函数如下：

function setLine() {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }
  let x1 = localStorage.getItem("x1")
  let y1 = localStorage.getItem("y1")
  let x2 = localStorage.getItem("x2")
  let y2 = localStorage.getItem("y2")
  let stroke = localStorage.getItem("stroke")
  console.log(x1, y1, x2, y2, stroke)
  let lines = [
    new Line(x1, y1, x2, y2, stroke)
  ]
  localStorage.setItem("lines", JSON.stringify(lines))
}

在我的存储中添加一行非常有效，但即使我尝试写：

this.objects = lines，它不会更新我在数据中的对象...

谁能告诉我该怎么做？

Answer 1

我试图理解并复制您的问题：

const localStorageMock = {
  x1: 1,
  y1: 2,
  x2: 3,
  y2: 4,
  stroke: 5,
}

function setLine() {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }

  let x1 = localStorageMock["x1"]
  let y1 = localStorageMock["y1"]
  let x2 = localStorageMock["x2"]
  let y2 = localStorageMock["y2"]
  let stroke = localStorageMock["stroke"]

  const newLine = new Line(x1, y1, x2, y2, stroke)

  let lines = [
    new Line(x1, y1, x2, y2, stroke)
  ]
}

new Vue({
  el: "#app",
  data() {
    return {
      lines: [],
    }
  },
  mounted() {
    this.lines = setLine()
    console.log(this.lines)
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

上面的 sn-p 不会改变任何东西，因为setLine() 不会返回任何东西。 （好的，它会将this.lines 空数组更改为undefined。）

建议 1

const localStorageMock = {
  x1: 1,
  y1: 2,
  x2: 3,
  y2: 4,
  stroke: 5,
}

function setLine() {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }

  let x1 = localStorageMock["x1"]
  let y1 = localStorageMock["y1"]
  let x2 = localStorageMock["x2"]
  let y2 = localStorageMock["y2"]
  let stroke = localStorageMock["stroke"]

  const newLine = new Line(x1, y1, x2, y2, stroke)

  let lines = [
    new Line(x1, y1, x2, y2, stroke)
  ]
  return lines
}

new Vue({
  el: "#app",
  data() {
    return {
      lines: [],
    }
  },
  mounted() {
    this.lines = setLine()
    console.log(this.lines)
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

如果您想添加更多行

const localStorageMock = {
  x1: 1,
  y1: 2,
  x2: 3,
  y2: 4,
  stroke: 5,
}

function setLine(lineArr = []) {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }

  let x1 = localStorageMock["x1"]
  let y1 = localStorageMock["y1"]
  let x2 = localStorageMock["x2"]
  let y2 = localStorageMock["y2"]
  let stroke = localStorageMock["stroke"]

  const newLine = new Line(x1, y1, x2, y2, stroke)

  let lines = [
    ...lineArr,
    new Line(x1, y1, x2, y2, stroke)
  ]
  return lines
}

new Vue({
  el: "#app",
  data() {
    return {
      lines: [],
    }
  },
  mounted() {
    this.lines = setLine() // adding the first line
    this.lines = setLine(this.lines) // adding the second line
    this.lines = setLine(this.lines) // adding the third line
    console.log(this.lines)
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

建议 2

const localStorageMock = {
  x1: 1,
  y1: 2,
  x2: 3,
  y2: 4,
  stroke: 5,
}

function setLine({
  x1,
  y1,
  x2,
  y2,
  stroke
}) {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }
  return new Line(x1, y1, x2, y2, stroke)
}

new Vue({
  el: "#app",
  data() {
    return {
      lines: [],
    }
  },
  mounted() {
    this.lines = [
      setLine(localStorageMock),
      setLine(localStorageMock),
      setLine(localStorageMock),
      setLine(localStorageMock),
      setLine(localStorageMock),
    ]
    console.log(this.lines)
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>