Vuex State只读报错：如何在VueCLI+Tauri中修改状态？

错误原因 #

你遇到的[Vue warn]: Write operation failed: computed property "renameActive" is readonly警告，根源有两点：

1. 当前定义的renameActive是只读计算属性，仅能用来获取值，无法直接赋值修改；
2. Vuex的状态（state）不允许直接修改，必须通过mutation操作——这是Vuex的核心规则，保证状态变更可追踪、符合单向数据流设计。

解决步骤 #

1. 在Vuex Store中添加Mutation

修改src/store/index.js，在mutations中新增修改renameActive的方法：

import { createStore } from 'vuex'

export default createStore({
  state: {
    navbar: [
      "upload", "folder", "reset", "settings", "about"
    ],
    currentTab: "All",
    renameActive: false,
  },
  getters: {
  },
  mutations: {
    // 新增mutation：设置renameActive的状态值
    SET_RENAME_ACTIVE(state, value) {
      state.renameActive = value
    }
  },
  actions: {
  },
  modules: {
  }
})

2. 在组件中通过Commit触发Mutation

修改组件的AddTab方法，通过$store.commit调用mutation修改状态：

<template>
<div class="TabContainer flex_c_h flex_start gap1">
    <div class="tab grid_c">All</div>

    <Icons
        :customClass="'addTab'"
        :icon="'plus'"
        @triggered="AddTab" />
    <RenameField v-if="renameActive" />
</div>
</template>

<script>
import Icons from '@/components/Assets/Icons.vue'
import RenameField from '@/components/Popups/RenameField.vue'
export default {
    components: {
        Icons,
        RenameField
    },
    computed: {
        renameActive() {
            return this.$store.state.renameActive
        }
    },
    methods: {
        AddTab() {
            // 调用mutation修改state
            this.$store.commit('SET_RENAME_ACTIVE', true)
        }
    }
}
</script>

可选优化：使用可写计算属性（不推荐） #

如果想保留通过计算属性赋值的写法，也可以将其改为可写计算属性，内部仍通过mutation修改状态：

computed: {
  renameActive: {
    get() {
      return this.$store.state.renameActive
    },
    set(value) {
      this.$store.commit('SET_RENAME_ACTIVE', value)
    }
  }
},
methods: {
  AddTab() {
    this.renameActive = true
  }
}

但更推荐直接调用commit的方式，更贴合Vuex的设计规范，代码可读性更强。

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