vue项目中，...用法

在 Vue 项目中，`...` 是 JavaScript 中的扩展运算符，它可以将一个数组或对象展开成另一个数组或对象，用法如下：

1. 展开数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

2. 展开对象：

const obj1 = { name: 'Tom', age: 18 };
const obj2 = { gender: 'male', hobby: 'football' };
const newObj = { ...obj1, ...obj2 }; // { name: 'Tom', age: 18, gender: 'male', hobby: 'football' }

3. 剩余参数：

function sum(...nums) {
  return nums.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3); // 6

在 Vue 项目中，`...` 的常见用法包括：

1. 在组件中传递 props：

<template>
  <ChildComponent v-bind="{ ...props1, ...props2 }" />
</template>

<script>
export default {
  props: {
    props1: Object,
    props2: Object,
  },
  components: {
    ChildComponent,
  },
};
</script>

2. 在 vuex 中混合对象：

import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  getters: {
    getCount(state) {
      return state.count;
    },
  },
});

const mixin = {
  computed: {
    ...mapGetters(['getCount']),
  },
  methods: {
    ...mapMutations(['increment']),
  },
};

export default {
  store,
  mixins: [mixin],
};

以上是 `...` 的常见用法，希望对你有所帮助。