通过调用window.onresize 来实现，当窗口缩放之后，echarts也会重新绘制

window.onresize = function () {
      myChart.resize()
   }

let d1 = new Date(this.lists.joindate);
this.lists.joindate = d1.getFullYear() + "-" + (d1.getMonth() + 1) + "-" + d1.getDate();

vuex的五个状态

//1.存储数据
  state: {

  },

//2.修改数据
  mutations: {

  },

3.运算属性
  getters: {

  },

4.//异步（发送请求） 
  actions: {

  },

5.模块化
  modules: {

  }

使用方法:

存储数据：

  state: {
    name:'张三',
    infodata:{},
  },

访问数据

this.$store.state.name

//推荐在计算属性里面访问

    computed: {
        x_name() {
            return this.$store.state.name
        }
    }

修改数据

定义一个方法，接受2个参数，第一个指向state,第二个是传入的值

  mutations: {
    changname(state, val) {
      state.name = val
    },
    data(state,val){
        state.infodata=val
    }
  },

触发事件通过this.$store.commit('changname', '李四')进行修改，传入2个参数，第一个是函数名，第二个修改的参数会被val接收。

代码示例

<button @click="a">点击发送修改/button>
<script>
export default {
       methods: {
          a() {
            this.$store.commit('changname', '野马')
        }
    },
}

发送请求

     //异步（发送请求） 
    //在顶部引入：import { $_ShopEeller } from '@/apis/index.js'
  actions: {
    async info (infos){ //infos,用于触发mutations里面修改方法
        let res = await $_ShopEeller()
        infos.commit('data',res)//data 定义修改的方法，res=值
    }
  },

页面调用请求

    created() { 
        //页面初始化触发actions里面请求info
        this.$store.dispatch('info')
    },

计算属性

  getters: {
    shoplist(state) {
      let newarr = []
      for (let key of state.goodlist) {
        for (let chil of key.foods) {
          if (chil.valueNum > 0) {
            newarr.push(chil)
          }
        }
      }
      return newarr
    }
  },

调用方法

在计算属性computed内调用，方法：$store.getters.shoplist 有利于性能，当引用的数据发生改变才会重新计算，有缓存性，
接收一个参数，指向state（vuex数据存储的地方）通过state.名字可以访问到，state里面的数据。

    computed: {
        numzj() {
            return this.$store.getters.shoplist
        },
    },

解决办法:

public下面的index.html改成index.ejs就行了

vue.set 是 Vue.js 提供的一个全局方法，用于在响应式对象中新增属性或修改数组的索引值。vue.set 是为了解决 Vue.js 在默认情况下无法检测到对象属性的新增或数组索引的变化而引入的。

vue.set 方法接受三个参数：目标对象、属性名或数组索引、属性值。其用法如下：

Vue.set(target, propertyName/index, value)

• 参数一:需要更新的数组或对象
• 参数二:是数组的下标或者对象的属性名，
• 参数三:是更新的内容

修改数组的方法：（修改下标为2的元素为D）

let arr = ["a","b","c"];
this.$set(arr, 2, "d");

修改对象的方法：(修改name属性值为：李四）

let obj = {
  name: "张三",
  age: 18,
  sex: "男"
};
this.$set(obj, "name", "李四");

新增对象的方法：(修新增身高属性）

this.$set(obj, "height", 180);

{
  name: "李四",
  age: 18,
  sex: "男",
  height: 180
}

新增数组元素

// 假设data中有一个数组变量名为myArray
// 初始化数组
this.myArray = ['item1', 'item2', 'item3'];

// 添加新元素
this.$set(this.myArray, this.myArray.length, 'newItem');

// 现在myArray为['item1', 'item2', 'item3', 'newItem']

在 Vue.js 2.x 中，有八个生命周期钩子函数，它们按照组件的创建、更新和销毁阶段被依次调用

1. beforeCreate（创建前）：

在实例被创建之前调用。这个阶段，组件的数据和方法还未初始化，无法访问到组件实例的属性。

2. created（创建后）：

在实例被创建之后调用。在这个阶段，组件的数据和方法已经初始化完成，可以访问组件实例的属性。

3. beforeMount（挂载前）：

在组件被挂载到 DOM 之前调用。在这个阶段，模板已经编译完成但尚未渲染到页面。

4. mounted（挂载后）：

在组件被挂载到 DOM 后调用。在这个阶段，模板已经编译完成并且已经渲染到页面上，可以进行 DOM 操作。

5. beforeUpdate（更新前）：

在组件更新之前调用。在这个阶段，组件的数据发生了变化，但 DOM 尚未重新渲染。

6. updated（更新后）：

在组件更新之后调用。在这个阶段，组件的数据已经变化并且 DOM 已经重新渲染完毕。

7. beforeDestroy（销毁前）：

在组件销毁之前调用。在这个阶段，组件实例仍然完全可用，可以进行一些清理操作。

8. destroyed（销毁后）：

在组件销毁之后调用。在这个阶段，组件实例已经被销毁，无法再访问到组件实例的属性和方法。

这些生命周期函数允许你在不同的阶段执行代码，从而能够处理一些特定的逻辑，比如在创建阶段初始化数据、在挂载阶段发起数据请求、在更新阶段执行一些计算或请求等。通过对这些生命周期的合理利用，可以更好地控制和管理组件的行为和状态。

$nexttick 的详细说明:

$nexttick 是一个异步编程的概念，常见于一些 JavaScript 框架和库中，比如 Vue.js 和 React.js。它允许你推迟一个函数的执行，以便在当前的 JavaScript 代码块执行完成之后再执行该函数。这对于处理一些需要在 UI 更新后执行的操作非常有用。

在 JavaScript 中，所有代码都运行在一个单线程的事件循环中。事件循环负责不断从消息队列中取出任务并执行它们。通常情况下，JavaScript 会按照代码的顺序一次执行任务，中途不会插入其他任务。这就意味着，如果有一个耗时较长的任务，它会阻塞其他任务的执行。

这时，$nexttick 就派上了用场。它的主要作用是将一个回调函数推迟到下一个事件循环中执行，而不是立即执行。这样，当前代码块的执行可以顺利完成，不会被耗时较长的任务阻塞。

在 Vue.js 和 React.js 中，$nexttick 通常用于处理 DOM 的更新。当你修改了 Vue.js 或 React.js 组件中的数据或状态时，框架会进行异步的 DOM 更新。而有时你可能需要在 DOM 更新完成后执行一些操作，比如获取元素的尺寸、操作真实的 DOM 元素等。这时你可以把这些操作放在 $nexttick 的回调函数中，确保在 DOM 更新完成后再执行它们。

值得注意的是，$nexttick 并不是 JavaScript 的原生 API，它是一些框架和库提供的特定方法。因此，具体的使用方式和语法可能会有所差异。在 Vue.js 中，你可以使用 Vue.nextTick(callback) 来注册一个 $nexttick 回调函数。在 React.js 中，你可以使用 ReactDOM.nextTick(callback) 来实现类似的功能。

$nexttick 的简单理解:

$nexttick 允许你推迟一个函数的执行，以确保在当前的 JavaScript 代码块执行完成之后再执行该函数。它常见于一些 JavaScript 框架和库中，用于处理异步操作和 DOM 的更新。

简单来说，$nexttick 就是让某个函数在 JavaScript 的事件循环中的下一个周期执行，而不是立即执行。这样可以避免长时间运行的函数阻塞主线程，保证其他任务的执行。在一些前端框架中，它常用于确保在 DOM 更新完成后再执行一些额外的操作。例如，在改变 Vue.js 或 React.js 组件的数据或状态后，你可以使用 $nexttick 来确保在 DOM 更新完毕后再进行一些操作，比如获取元素的尺寸或操作真实的 DOM 元素。

// 使用 Object.assign() 进行浅拷贝
this.form = Object.assign({}, row)

// 使用展开操作符 ... 进行浅拷贝
this.form = { ...row }