pinia的state中定义数组没有响应式，只读不可改

不知道你们有没有遇到过标题上面这个问题，在网上找来找去没找到解决方法，接下来是我想到的一种间接为数组添加响应式的方法（其实本质是控制index）

这种方法是我在写项目的时候想到的，就用我的那个案例来举例吧

先说一下这个案例的要求：需要通过它们每个数组中的show值（true/false)来控制滑开a之后再滑开b的话，之前滑开的a就会合起来，所以这里需要控制数组里面的show值来控制是否合起（大概就和手风琴差不多）

 

 那么接下来讲一下是怎么让这个数组里面的show值变成响应式的：

---

 第一步

我把show值提了出来 

// 每个值对应这个数组的状态 false代表合起，true代表拉开
const showKey = reactive([false, false, false, false])

---

 第二步

在state里面加一个有响应式的showIndex

state: () => {
    return {
		showIndex:ref()
    }
}

在 actions里面添加一个方法

actions：{
    changeShow(index:any){
		this.showIndex = index // 传入滑开的数组对应的下标，并修改showIndex的值
    }
}

---

 第三步

添加一个open事件（即滑开事件）

 

// 这里这个open事件会传入一个index值，即为滑开的那个数组的下标
const open = (index) => {
  plan.changeShow(index) // 把下标传给store/plan.ts里面的函数
}

---

 第四步

加一个监听函数，监听showIndex的变化

watch(showIndex, () => {
    // 一旦变化就对showKey这个数组进行遍历
  showKey.value.forEach((element, index) => {
    if (index === showIndex.value) {
      showKey.value[showIndex.value] = true // 把滑开的数组的show值设置为true
    } else {
      showKey.value[index] = false // 把除滑开的数组的show值设置为false
    }
  })
})

最后，showKey这个数组就间接的通过showIndex来获得响应式啦