변환 시 Vuex 상태가 업데이트되지 않음

변환 시 Vuex 상태가 업데이트되지 않음

Vue.js/Vuex 기반 응용 프로그램에서 다음 변환을 사용하여 Vuex 상태의 일부를 리셋합니다.

restartGame(state) {
    state.gameRunning = true

    state.camera = {
        position: {
            x: 0,
            y: 10,
            z: 0
        },
        moveForward: false,
        moveBackward: false,
        moveLeft: false,
        moveRight: false,
        velocity: {
            x: 0,
            z: 0
        },
        mouseMovement: {
            x: 0,
            y: 0
        },
        rotation: {
            x: 0,
            y: 0
        }
    }
}

이렇게 하면 일이 잘 풀리지만, 카메라 상태 전체를 쓰는 것은 꽤 장황하게 느껴집니다.초기 카메라 상태를 별도의 파일로 추출했습니다.

초기 Camera State.js

export default {
    position: {
        x: 0,
        y: 10,
        z: 0
    },
    moveForward: false,
    moveBackward: false,
    moveLeft: false,
    moveRight: false,
    velocity: {
        x: 0,
        z: 0
    },
    mouseMovement: {
        x: 0,
        y: 0
    },
    rotation: {
        x: 0,
        y: 0
    }
}

리팩터링한resetGame()다음과 같은 돌연변이:

import initialCameraState from './initialCameraState'

restartGame(state) {
    state.gameRunning = true

    state.camera = initialCameraState
}

하지만 이 방법은 작동하지 않습니다.Vuex 스토어는 업데이트되지 않고 그대로 유지되고 있는 것 같습니다.어떻게 이럴 수 있죠?

저도 쓰고 있어요.initialCameraState.jsVuex 스토어의 초기 상태를 설정합니다(일부).내 첫 번째 생각은 주(州)를 변이시킬 때initialCameraState변이되고 있습니다.그럼 설명이 되겠네요resetGame()아무 효과도 보이지 않아요.그래서 두 장소 모두에서 객체 확산 연산자를 사용해보았습니다.initialCameraState.jsImport/사용되지만 문제는 해결되지 않았습니다.

당신의 모든 코드를 알고 있지는 않지만, 제 생각엔 이렇게 될 것 같습니다.Import한 초기 상태로 게임에 접속하고 있습니다.게임 중에 다음과 같은 방법으로 오브젝트 상태를 업데이트합니다.

   state.camera['position'] = {
      x: 100,
      y: 100,
      z: 100
    }
  }

실제로는 복사본이 아닌 개체에 대한 참조가 있기 때문에 초기 상태가 업데이트되므로 초기 상태 개체를 잘못 변경했기 때문에 상태를 리셋하려고 해도 그대로 유지됩니다.

이 문제를 해결하려면 초기 상태를 함수(공장 출하 시 기능)로 랩핑하여 항상 초기 상태를 되돌립니다.

export default function() {
  return {    
    position: {
      x: 0,
      y: 10,
      z: 0
    },
    moveForward: false,
    moveBackward: false,
    moveLeft: false,
    moveRight: false,
    velocity: {
      x: 0,
      z: 0
    },
    mouseMovement: {
      x: 0,
      y: 0
    },
    rotation: {
      x: 0,
      y: 0
    }
  }
};

여기 JSFiddle이 있습니다. 함수가 없으면 어떻게 되는지 보여줍니다(위치는 그대로입니다). https://jsfiddle.net/9qg8ws0x/

이 기능(위치는 리셋)이 있는 것도 있습니다.https://jsfiddle.net/27xozazf/

export default {
  initializeCamera () {
    return {
      position: {
        x: 0,
        y: 10,
        z: 0
      },
      moveForward: false,
      moveBackward: false,
      moveLeft: false,
      moveRight: false,
      velocity: {
        x: 0,
        z: 0
      },
      mouseMovement: {
        x: 0,
        y: 0
      },
      rotation: {
        x: 0,
        y: 0
      }
    }
  }
}

import initial from './initial'

restartGame(state) {
  state.gameRunning = true
  state.camera = initial.initializeCamera()
}

언급URL : https://stackoverflow.com/questions/47552377/vuex-state-not-updating-on-mutation