Question

当我尝试更改组件的输入文本的文本时，在控制台中出现此错误：

[vuex]不会在变异处理程序之外变异vuex存储状态

我还在vuex中使用nuxt。

我在商店里有这个东西

editor.js

export const state = () => ({
  project_blocks: [{
    id: null,
    type: 'text-right',
    content:{
      title: 'Title 2',
      text: 'Text 2',
    }
  },{
      id: null,
      type: 'text-left',
      content:{
        title: 'Title 1',
        text: 'Text 1',
      }
    }],
});

export const mutations = {
  SET_BLOCKS(state, blocks){
    state.project_blocks = blocks;
  },
};


export const getters = {
  project_blocks(state){
    return state.project_blocks;
  }
};

在我的组件中，我有：

Index.vue

<template>
   <component v-for="(block, index) in project_blocks" :key="'module'+index" :block="block" :is="block.type"></component>
</template>

<script>
   export default{
      computed: {
         project_blocks:{
           get(){
             return this.$store.getters['editor/project_blocks'];
           },
           set(val){
             this.$store.commit('editor/SET_BLOCKS', val);
           }
         },
       }
   }
</script>

在我的“组件类型”中，我有：

TextLeft.vue

<template>
   <input type="text" v-model="block.content.title">
   <input type="text" v-model="block.content.text">
</template>

<script>
   export default{
      props:['block']
   }
</script>

当我尝试更改这些输入文本的文本时，出现以下错误： [vuex]不在变异处理程序之外变异vuex存储状态，而且我不知道如何解决它:(

谢谢大家！

Answer 1

该错误消息在这里很有帮助（令人惊讶？）。当您对某事物进行v建模时，您的意思是“当输入更改时，修改我给您的事物的值。”

但是，正如错误所言，这导致您直接更改本来要由Vuex存储的数据，而这并不是Vuex喜欢完成的事情。您应该使用自己的突变。

编辑：以下评论是错误的。谢谢，陶！ 旁注：set(val)函数不应位于computed中，而应位于methods中。

Answer 2

Vuex抱怨v-model直接更改状态，因为您正在向其传递一个吸气剂（可观察到的）。

要正确更新状态，应使用操作。添加执行该突变的动作，并将其分配到您所计算的设置器中：

computed: {
  project_blocks:{
    get(){
      return this.$store.getters['editor/project_blocks'];
    },
    set(val){
      this.$store.dispatch('editor/setBlocks', val);
    }
  }
}

存储/编辑器模块：

actions: {
  setBlocks({ commit }, payload) {
    commit('SET_BLOCKS', payload);
  }
}

突变保持不变。

forms中提供的示例仅适用，因为它们使用的是obj的子属性。如果他们自己使用obj（顶级的getter值），他们将得到与您相同的错误。

Answer 3

主要作用是异步调用。您可以使用Vuex突变，但不能直接更改状态。这是正确的不变性定义（您可以查看Vuex doc）。我认为现在的主要问题是您的计算属性返回vuex getters结果，并且在项目上有vuex监视程序。而当您更改它时-显示错误。

Answer 4

我已修复错误！我在组件内部创建了一个数据值，并通过两个突变分别更改了该值。

TextLeft.vue：

<template>
   <input type="text" v-model="title">
   <input type="text" v-model="text">
</template>

<script>
   export default{
      props:['block'],
      data(){
         title: this.block.content.title,
         text: this.block.content.text
      },
      watch:{
          title(val){
             this.$store.commit('editor/SET_TITLE', { index: this.block.index, 
title: val });
      },
          text(val){
            this.$store.commit('editor/SET_TEXT', { index: this.block.index, text: val });
      }
    }
   }
</script>

更改输入文本值vuex

4 个答案: