로컬 편집을 위한 Vuex 클론 개체

로컬 편집을 위한 Vuex 클론 개체

중앙 스토리지 관리에 Vue with Vuex를 사용하고 있습니다.스토어에 set Timeout 함수에 의해 자주 갱신되는 오브젝트 목록이 있습니다.양방향 데이터 바인딩 폼으로 사용자가 선택하고 편집할 수 있도록 하고 싶습니다.문제는 스토어의 데이터가 갱신될 때마다 사용자가 수정하고 있는 선택된 오브젝트도 다시 렌더링된다는 것입니다.이렇게 하면 사용자가 변경 내용을 잃게 됩니다.

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: function(id){
            this.editSelectedDataSource(id)
            var t = JSON.parse(JSON.stringify(this.selectedDataSource))
            if(this.localSelectedDataSource.id != this.selectedDataSource.id){
              this.localSelectedDataSource = t
            }
          }
      }
    }
    </script>

감사합니다.

디버깅을 몇 시간 동안 진행한 결과 친구와 저는 오류를 발견했습니다.

v-bind 약어를 사용했습니다.

<div><sui-input placeholder="Url" :value="localSelectedDataSource.url"/></div>

v-model 쌍방향 바인딩이 아닌

<div><sui-input placeholder="Url" v-model="localSelectedDataSource.url"/></div>

따라서 중앙 vuex 저장소가 업데이트될 때마다 양식에 바인딩된 로컬 복사본을 포함하여 구성 요소 데이터 바인딩이 재연결되었습니다.

여러분 덕분에

v-model을 사용하려면 계산된 속성을 사용해야 합니다.v-model에서 계산된 속성을 사용하는 것보다 저장소에 있는 값을 반환하는 계산된 속성을 만들 수 있습니다.그나저나 v-model은 다음을 위한 통사설탕입니다.

:value="someData" @input="someData=$event.target.value"
@input이 없기 때문에 :value로 동작할 수 있습니다.

검색한 결과, 이 링크가 도움이 되었습니다.Vuex 상태에서 로컬 데이터로 데이터를 복제하려면 어떻게 해야 합니까?기본적으로는beforeMount()method를 선택한 후 원하는 대로 편집합니다. : )

언급URL : https://stackoverflow.com/questions/48292642/vuex-clone-object-for-local-editing