使用vuex截断对象数组中的文本？

state: {
  items: [
    { id: 1, text: '这是一段很长的文本1' },
    { id: 2, text: '这是一段很长的文本2' },
    { id: 3, text: '这是一段很长的文本3' }
  ]
}

mutations: {
  truncateText(state, payload) {
    const item = state.items.find(item => item.id === payload.id);
    if (item) {
      item.text = item.text.substring(0, payload.maxLength) + '...';
    }
  }
}

import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['items'])
  },
  methods: {
    ...mapMutations(['truncateText']),
    truncateItemText(id, maxLength) {
      this.truncateText({ id, maxLength });
    }
  }
}

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
      <button @click="truncateItemText(item.id, 10)">截断</button>
    </div>
  </div>
</template>