vue.filename: 개체를 사용하여 상태를 업데이트하려면 어떻게 해야 합니까?

vue.filename: 개체를 사용하여 상태를 업데이트하려면 어떻게 해야 합니까?

저는 vue.js에 처음 온 사람입니다만, React는 이전부터 경험이 있습니다.

vue 가이드라인을 읽고 React의 개념을 통해 vue를 이해하려고 합니다.

내 생각에 vue는dataReact와 유사합니다.state앱을 업데이트하면 페이지가 다시 렌더링되기 때문입니다.

그래서 저는 이런 걸 하고 싶어요.(코드는 리액트에 있습니다)

this.setState(Object.assign({}, this.state, { key1: 'value1', key2 : 'value2'}))

하지만 내가 아는 한, vue:

this.key1 = 'value1';
this.key2 = 'value2';

그것이 맞습니까?2개의 문장이니 vue가 두 번 렌더링 할 것 같아요.한 번에 여러 값을 설정하려면 어떻게 해야 합니까?

나는 이미 시도했다...

// not working
this.$set(Object.assign({}, thisRef.data, { key1: 'value1', key2: 'value2' }))

// not working
this.data = { key1 : 'value1', key2: 'value2' };

두 번째 예에서는 데이터가 변경되었습니다. - 다음 예에서 값을 인쇄했습니다.console.log(this)- 단, 다시 렌더링되지 않습니다.

참고로 vue 템플릿의 전체 코드는 여기에 있습니다.코드 검토와 수정은 매우 환영받을 것입니다.

<script>
    export default {
        layout: 'reactQuickly'
        , data: function(){
            return {
                time: null
                , init: null
            }
        }
        , methods: {
            startTimer: function(time){
                clearInterval(this.init);
                let thisRef = this;
                let interval = setInterval(
                    function(){
                    console.log('2: Inside of interval', time)
                    let timeLeft = thisRef.time - 1;
                    if(timeLeft <= 0) clearInterval(interval);
                    thisRef.time = timeLeft;
                    // thisRef.$set(Object.assign({}, thisRef.data, { time: timeLeft }))
                    console.log('thisRef', thisRef, this);}
                , 1000);
                console.log('1: After interval');
                // this.data = { time : time, init: interval };
                this.time = time;
                this.init = interval;
                console.log('this.data', this.data);
                // this.$set(Object.assign({}, this.data, { time : time, init: interval}));
            }
        }
    }
</script>

============판 ===========

반응this.state그리고 vuethis.data, 올바른 동일하지 않나요?나에게, 주요한 혼란 그 점에서 출발한다.

vue에서

export default {
  data : function() {
    return {
      foo : 'bar'
    }
  }
}

그리고.

반응에서

constructor() {
  super()
  this.state = {
    foo : 'bar'
  }
}

니 완전히 다른 개념, 그렇죠?

그 문제에 당신의 관심은 필요하지 않다.당신은 걱정할 필요가 없다.set multi values at once뷰에.

(나는 저는 이 멋진 기사 =&gt에서 말한 것인지입니다;향상 UI:값 비교 VS는 누굴까 돌연변이 추적을 배웠다.).

때 UI업데이트되어야 한다의 반응과 뷰 추적의 다른 방법을 가지고 있다.

의 반응 ObjectImmutability을 사용한다.그래서 everytime 당신setState, 중성미자를 본질적으로 완전히 새로운 개체와 전체 구성 요소 rerender는 새 개체 값에 기초해를 만들고 있다.

Vue는 변환 추적에 데이터 개체의 getters/setters를 사용합니다.실행 시this.key1 = 'value1';를 통과합니다.setter의key1셋터에는 이 사실을 알려주는 기능이 있습니다.watcher이 데이터 변경을 큐에 추가합니다.

아직 알아차리지 못한 경우 Vue는 DOM 업데이트를 비동기적으로 수행합니다.데이터 변경이 관찰될 때마다 큐가 열리고 동일한 이벤트 루프에서 발생하는 모든 데이터 변경이 버퍼링됩니다.같은 워처가 여러 번 트리거되면 큐에 푸시되는 것은 1회뿐입니다.이 버퍼링된 중복배제는 불필요한 계산과 DOM 조작을 피하기 위해 중요합니다.https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

" " 를 실행할 때this.key1 = 'value1'; this.key2 = 'value2';두 번 렌더링되지 않습니다.Vue는 자동으로 데이터 변경을 큐잉하고 나중에 함께 다시 렌더링합니다.

제 말은, 질문에서 당신의 걱정은 필요 없다는 겁니다. 안 돼요.set multi values at once와 반응하다위의 링크를 읽고 더 잘 이해할 수 있습니다.

(그런데 Vue는 현재 getter/setter를 사용하지만 앞으로는 JS 프록시를 사용할 예정입니다.https://github.com/vuejs/roadmap)

$set 메서드에서는 다음 한 가지 속성만 추가할 수 있습니다.

this.$set(this.existingObject, 'newProperty', 'value')

반응 속성을 여러 개 추가해야 하는 경우 할당 방법을 사용합니다.

this.existingObject = Object.assign({}, this.existingObject, {
  newProperty1: 'value',
  newProperty2: 22
}

이 기능은 개체의 일부 속성만 변경하고 나머지 속성은 건드리지 않으려는 경우에도 유용합니다.그래서:

this.existingObject = Object.assign({}, this.existingObject, {
  existingProperty2: 'newValue',
  existingProperty6: 66
}

Babel을 사용하고 있다면, 어느 경우든 소품 추가 또는 수정은 최신 스프레드 기능을 사용할 수 있습니다.

let newOrExistingProps = {
  newProperty: 'value',
  existingProperty: 66
}

this.existingObject = {...this.existingObject, ...newOrExistingProps}

Vuex 스토어: store.js

 export default new Vuex.Store({
  state: {
    numCorrect: 0, 
    numIncorrect: 0
  }, 
  mutations: {
    increment (state,payload) {
        state.numCorrect = payload.correct;
        state.numIncorrect = payload.incorrect;
      }
  }
});

Vue 파일: 안녕하세요.표시하다

import store from '../store/store'

  new Vue({
  el: '#app',
  methods: {
    updateText() {
      store.commit("increment", {correct:4,incorrect: 6 })
    }
  }
});

언급URL : https://stackoverflow.com/questions/51904769/vue-js-how-to-update-state-with-object