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;
  }
};

在我的组件中，我有:

索引.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)函数不应该在 computed ，应该在 methods .