Vue.js 3 Pinia Store仅部分响应式问题排查求助

在Vue 3 + Pinia项目中，状态管理出现部分响应式异常：

• 修改switch组件的element.active值时，Store能正常同步更新
• 拖拽调整数组顺序时，Store中的数组顺序未同步，且控制台抛出警告：Write operation failed: computed value is readonly
  目前已通过手动处理拖拽事件的临时方案解决，需要更规范的优化方案。

你当前把Pinia的getter直接绑定到了draggable的v-model上：

• Pinia的getter本质是Vue的计算属性（computed），默认是只读的，拖拽组件调整顺序时会尝试直接修改这个计算属性的返回值，因此触发只读警告
• switch修改的是数组元素的active属性（属于原响应式对象的属性），所以能正常响应；但拖拽是修改数组本身的顺序，直接操作getter返回的引用就会触发只读限制

方案1：直接绑定Store中的原始响应式数组 #

跳过getter，在组件中直接找到当前角色对应的elements数组，绑定到draggable上：

修改组件代码：

<template>
  <div>
    <draggable 
      v-model="currentRoleElements" 
      group="elements" 
      @end="onDragEnd" 
      item-key="name">
      <template #item="{element}">
        <n-card :title="formatElementName(element.name)" size="small" header-style="{titleFontSizeSmall: 8px}" hoverable>
          <n-switch v-model:value="element.active" size="small" />
        </n-card>
      </template>
    </draggable>
  </div>
</template>

<script setup>
  import { NCard, NSwitch } from 'naive-ui';
  import draggable from 'vuedraggable'
  import { usePermissionsStore } from '@/stores/permissions';
  import { storeToRefs } from 'pinia';
  import { computed } from 'vue';

  const props = defineProps({
    selectedRole: {
      type: String
    }
  })

  const permissionsStore = usePermissionsStore();
  const { roles, currentRole } = storeToRefs(permissionsStore);

  // 计算当前角色对应的elements数组（基于state的响应式属性）
  const currentRoleElements = computed({
    get() {
      const role = roles.value.find(r => r.label === currentRole.value);
      return role?.permissions.elements || [];
    },
    // 处理拖拽后的数组更新，直接修改state中的原始数组
    set(newElements) {
      const role = roles.value.find(r => r.label === currentRole.value);
      if (role) {
        role.permissions.elements = newElements;
      }
    }
  })

  const onDragEnd = () => {
    permissionsStore.save();
  }
  
  const formatElementName = (element) => {
    let title = element.charAt(0).toUpperCase() + element.slice(1);
    title = title.replace('-', ' ');
    title = title.split(' ');
    if (title[1]) {
      title = title[0] + ' ' + title[1].charAt(0).toUpperCase() + title[1].slice(1);
    }
    return typeof title === 'object' ? title[0] : title;
  }
  
</script>

方案2：在Store中添加Action处理数组排序 #

把数组顺序修改的逻辑封装到Store的action中，保持状态管理逻辑内聚：

修改Store代码：

state: () => {
  return {
    roles: [],
    currentRole: 'Administrator',
    elements: []
  }
},
getters: {
  getElementsForCurrentRole: (state) => {
    let role = state.roles.find((role) => role.label == state.currentRole);
    if (role) {
      return role.permissions.elements;
    }
  }
},
actions: {
  // 更新当前角色的elements数组顺序
  updateCurrentRoleElements(newElements) {
    const role = this.roles.find(r => r.label === this.currentRole);
    if (role) {
      role.permissions.elements = newElements;
    }
  }
}

修改组件代码：

<template>
  <div>
    <draggable 
      :list="getElementsForCurrentRole" 
      group="elements" 
      @end="onDragEnd" 
      item-key="name">
      <template #item="{element}">
        <n-card :title="formatElementName(element.name)" size="small" header-style="{titleFontSizeSmall: 8px}" hoverable>
          <n-switch v-model:value="element.active" size="small" />
        </n-card>
      </template>
    </draggable>
  </div>
</template>

<script setup>
  import { NCard, NSwitch } from 'naive-ui';
  import draggable from 'vuedraggable'
  import { usePermissionsStore } from '@/stores/permissions';
  import { storeToRefs } from 'pinia';

  const props = defineProps({
    selectedRole: {
      type: String
    }
  })

  const permissionsStore = usePermissionsStore();
  const { getElementsForCurrentRole } = storeToRefs(permissionsStore);

  const onDragEnd = (evt) => {
    // 拖拽结束后，将新数组传递给Store的action
    permissionsStore.updateCurrentRoleElements(evt.newValue);
    permissionsStore.save();
  }
  
  const formatElementName = (element) => {
    let title = element.charAt(0).toUpperCase() + element.slice(1);
    title = title.replace('-', ' ');
    title = title.split(' ');
    if (title[1]) {
      title = title[0] + ' ' + title[1].charAt(0).toUpperCase() + title[1].slice(1);
    }
    return typeof title === 'object' ? title[0] : title;
  }
  
</script>

• 临时方案：直接操作Store的state，虽能生效但逻辑分散在组件中，不符合Pinia状态管理规范（推荐通过action修改state）
• 规范方案1：通过组件内computed处理读写，直接操作原始响应式数组，逻辑清晰且符合Vue响应式规则
• 规范方案2：将数组修改逻辑封装到Store的action中，保持状态管理逻辑内聚，更适合复杂场景

内容的提问来源于stack exchange，提问作者Vueer