Vuex状态为只读

dced5bon  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(211)

我想用文档中的计算函数更改Vuex State,但它没有更改,控制台显示此错误。
[Vue警告]:写入操作失败:计算属性“renameActive”为只读
我正在使用Tauri.js中的VueCLI。

添加新选项卡Vue组件:

<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() {
            this.renameActive = true
        }
    }

}
</script>

<style lang="">

</style>

源代码/存储/索引.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    navbar: [
      "upload", "folder", "reset", "settings", "about"
    ],
    currentTab: "All",
    renameActive: false,
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

源代码/主.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

如何使其可写?

11dmarpk

11dmarpk1#

你可以在你的vuex商店里创造变异

mutateActive: (state, val) => (state.renameActive = val),

和vuex操作,您将调用这些操作:

setActive({ commit }, val) {
   commit('mutateActive', val);
 },

并在方法中调用vuex操作并传递值:

addTab() {
   this.$store.dispatch('setActive', true)
}

相关问题