vue 데이터 값을 글로벌 스토어 상태 값과 동기화하는 방법이 있습니까?

vue 데이터 값을 글로벌 스토어 상태 값과 동기화하는 방법이 있습니까?

데이터 값을 store.js의 값으로 업데이트하고 싶습니다.어떻게 가능합니까?아래 코드에서는 공백 페이지 오류가 발생했습니다.

App.vue

data() {
    return {
    storeState: store.state,
    Counter: this.storeState.Counter, 
    }
    }

store.displaces를 설정합니다.

   export const store = {
         state: {
         Counter: 1,
         }


     CounterUpdater(value) {
     this.state.Counter = (value);
     },
     }

당신은 데이터 속성에 참조할 수 없다.storeState)안에 있는data먹을 수 있는 옵션이 그렇고 어쨌든 그게 필요하지 않다.당신은 Vuex 값을 사용하여 요소 값 동기화할 computeds을 사용해야 한다.둘 다 데이터 값을 제거하십시오:

computed: {
  Counter() {
    return this.$store.state.Counter;
  }
}

아니면 사용하mapState:

import { mapState } from 'vuex'

computed: {
  Counter() {
    ...mapState(['Counter'])
  }
}

또한 당신의 가게 돌연변이 안에 있는지 확인합니다.mutations그리고를 사용하여 적절한 구문:.

state: {
  Counter: 1
},
mutations: {
  CounterUpdater(state, value) {
     state.Counter = value;
  }
}

또한 camelCase 규칙에 따라 변수 이름을 지정하는 것이 좋습니다(예: 소문자를 의미합니다).counter당신의 부호)에

언급URL : https://stackoverflow.com/questions/65633116/is-there-a-way-to-sync-vue-data-values-with-global-store-state-values