vue js에서 localStorage의 데이터를 비활성화하는 방법

vue js에서 localStorage의 데이터를 비활성화하는 방법

Vue js 프로젝트의 데이터 소스로 localStorage를 사용하고 있습니다.읽고 쓸 수 있지만 반응적으로 사용하는 방법을 찾을 수 없습니다.변경 사항을 확인하려면 새로 고쳐야 합니다.

데이터를 여러 컴포넌트의 소품으로 사용하고 있습니다.또한,localStorage트리거하는 컴포넌트로부터forceUpdate기본 App.vue 파일에 저장하기 위해updateDate방법.

강제 업데이트는 여기서 작동하지 않습니다.페이지를 새로 고치지 않고 이 작업을 수행할 수 있는 방법이 있습니까?

...............
data: function () {
        return {
            dataHasLoaded: false,
            myData: '',
        }
    },
mounted() {
        const localData = JSON.parse(localStorage.getItem('myData'));
        const dataLength = Object.keys(localData).length > 0;
        this.dataHasLoaded =  dataLength;
        this.myData = localData;
    },
methods: {
    updateData(checkData) {
        this.$forceUpdate();
        console.log('forceUpdate on App.vue')
    },
},
...............

이렇게 해결했습니다.로컬 스토리지는 사후 대응적이지 않지만, 업데이트 후에도 상태를 유지하는 데 매우 적합합니다.

반응성이 뛰어난 것은 localStorage 값으로 초기화할 수 있는 일반적인 오래된 데이터 값입니다.데이터 값과 로컬 스토리지의 조합을 사용합니다.

보관하고 있던 토큰에 대한 업데이트를 확인하려고 했습니다.localStorage이런 일이 일어났을 때 이렇게 될 수 있습니다.

const thing = new Vue({
  data(){
    return {
      tokenValue: localStorage.getItem('id_token') || '',
      userValue: JSON.parse(localStorage.getItem('user')) || {},
    };
  },
  computed: {
    token: {
      get: function() {
        return this.tokenValue;
      },
      set: function(id_token) {
        this.tokenValue = id_token;
        localStorage.setItem('id_token', id_token)
      }
    },
    user: {
      get: function() {
        return this.userValue;
      },
      set: function(user) {
        this.userValue = user;
        localStorage.setItem('user', JSON.stringify(user))
      }
    }
  }
});

처음에 문제가 된 것은 제가 이 시스템을localStorage.getItem()하지만 Vue는 로컬 스토리지에서 무슨 일이 일어나고 있는지 모르고 다른 옵션이 있을 때 대응에 집중하는 것은 어리석은 일입니다.요령은 초기에 로컬 스토리지를 활용하고 변경 사항이 발생하면 로컬 스토리지 값을 지속적으로 업데이트하되 Vue가 알고 있는 사후 대응적인 가치를 유지하는 것입니다.

같은 딜레마에 직면한 사람들을 위해, 나는 내가 원하는 방식으로 그것을 해결할 수 없었지만, 나는 그것을 피할 방법을 찾았다.

• 원래 localStorage의 데이터를 myData라는 상위 데이터의 값으로 로드했습니다.
• 그런 다음 소품에서 myData를 사용하여 소품을 통해 컴포넌트에 데이터를 입력했습니다.
• 데이터를 새로 추가하거나 편집하고 싶을 때
  • local Storage의 새로운 복사본을 가져왔습니다.
  • 추가해서 다시 저장했습니다.
  • 동시에 localStorage의 업데이트된 복사본을 부모 myData로 내보냅니다.
  • 소품을 통해 하위 구성요소의 모든 데이터를 업데이트했습니다.

이렇게 하면 모든 데이터가 하나의 데이터 소스에서 실시간으로 업데이트됩니다.

언급URL : https://stackoverflow.com/questions/51015101/how-to-make-data-from-localstorage-reactive-in-vue-js