vue.js - 更改输入文本值vuex

Question

当我尝试更改组件的输入文本的文本时，我在控制台中收到此错误:

[vuex] do not mutate vuex store state outside mutation handlers

我还将 nuxt 与 vuex 结合使用。

我的商店里有这个:

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-model 时，你是在说“当这个输入发生变化时，修改我给你的这个东西的值。”

然而，正如错误所示，这会导致您直接改变 Vuex 存储的数据，这不是 Vuex 喜欢的完成方式。你应该使用你的突变。

编辑:以下评论是错误的。谢谢，涛! 旁注:您的 set(val) 函数不应位于 compulated 中，而应位于 methods 中。