相关疑难解决方法(0)

为什么我会收到此错误:

错误[vuex]不要在变异处理程序之外改变vuex存储状态.

这是什么意思？

当我尝试输入编辑输入文件时会发生这种情况.

页/待办事项/ index.vue

<template>
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" :checked="todo.done" v-on:change="toggle(todo)">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button class="destroy" v-on:click="remove(todo)">delete</button>

      <input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">

    </li>
    <li><input placeholder="What needs to be done?" autofocus v-model="todo" v-on:keyup.enter="add"></li>
  </ul>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data () {
    return {
      todo: '',
      editedTodo: null
    }
  },
  head () {
    return {
      title: this.$route.params.slug || 'all', …

我正在使用Vue和Vuex进行集中存储管理.我在商店中有一个对象列表,它经常被setTimeout函数更新.我想让用户使用双向数据绑定表单选择和编辑它.我的问题是,只要存储中的任何数据得到更新,用户修改的选定对象也会被重新渲染.以这种方式,用户丢失了更改.

解决方案是将对象从Vuex存储克隆到本地数据对象,并将其绑定到表单以防止在编辑时进行更新.我尝试了一切可能的方法来克隆Vuex返回但没有成功的可观察对象.特别是我尝试了以下方法:

JSON.parse(JSON.stringify(obj))

和

Object.assign({}, vueObj)

以及来自外部库(如_和jQuery)的其他深度克隆方法.

这是我从Vuex商店获得的对象:

如果我对其进行字符串化,则解析它并分配给本地vue数据对象,只要更新Vuex中央存储,它就会更新.

这是我的代码(仅限组件,而不是Vuex商店):

    <template>
  <div class="">

    <div v-if="localSelectedDataSource.id">
      {{localSelectedDataSource.name}}
    </div>
    <div v-if="localSelectedDataSource.id">
      <div><sui-input placeholder="Url" :value="localSelectedDataSource.url"/></div>
      <div>{{localSelectedDataSource.method}}</div>
      <div>{{localSelectedDataSource.pollingInterval}}</div>
    </div>

    <div class="datasource-list">
      <div
      v-bind:class="{ highlightdatasource: dataSource.view.highlighted }"
      v-for="dataSource in dataSources"
      v-on:mouseover="highlightDataSource(dataSource.id)"
      v-on:mouseout="highlightDataSource(-1)"
      v-on:click="editSelectedDataSourceLocal(dataSource.id)"
      >
        {{dataSource.name}} - {{dataSource.url}}
      </div>
    </div>
  </div>

    </template>

      <script>
      import {mapGetters} from 'vuex';
      import {mapActions} from 'vuex';

    export default {
      name: 'DataSourceList',
      data(){
            return{
              localSelectedDataSource: {}
            }
        },
      computed: {
            ...mapGetters([
                'dataSources',
                'selectedDataSource'
            ])
        },
      methods: {
          ...mapActions([
              'highlightDataSource',
              'editSelectedDataSource'
          ]),
          editSelectedDataSourceLocal: …