使用vuex-persistedstate时q-drawer绑定的drawerOpen报computed只读错误

根因 #

你通过mapGetters映射得到的drawerOpen是仅具备读权限的计算属性，而q-drawer的v-model属于双向绑定，会在状态变更时尝试直接修改该属性值，违反了Vuex单向数据流规范，因此抛出只读错误。未添加vue-persistedstate时未报错属于未触发严格校验的偶发情况，本身写法就不符合规范。

修复步骤 #

1. 修正action写法（潜在bug） #

你当前的action入参写法错误，action第一个参数是上下文对象，需要解构出commit方法：

// actions.js
export const toggleDrawer = ({ commit }, payload) => {
  commit("toggleDrawer", payload)
}

2. 可选修复方案二选一 #

方案A：拆分v-model绑定（更直观）

不需要修改计算属性，直接修改模板中q-drawer的绑定逻辑，把双向绑定拆分成属性绑定和事件监听，手动触发store更新：

<!-- 修改前 -->
<q-drawer
  v-model="drawerOpen"
  show-if-above
  bordered
  class="bg-grey-1"
>

<!-- 修改后 -->
<q-drawer
  :model-value="drawerOpen"
  @update:model-value="close_open_drawer"
  show-if-above
  bordered
  class="bg-grey-1"
>

方案B：给计算属性添加setter

如果要保留v-model写法，把drawerOpen改成具备get/set的完整计算属性：

// MainLayout.vue 中computed配置修改为
computed: {
  ...mapGetters({
    username: 'profile/getUsername',
  }),
  drawerOpen: {
    get() {
      return this.$store.getters['profile/getDrawerOpen']
    },
    set(val) {
      this.close_open_drawer(val)
    }
  }
},

可选优化：mutation兼容传值 #

如果需要支持直接指定抽屉开关状态，可以优化mutation逻辑：

// mutations.js
export const toggleDrawer = (state, payload) => {
  state.drawerOpen = payload ?? !state.drawerOpen
}

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