업데이트된 수명 주기 후크의 Vuex 상태 업데이트

업데이트된 수명 주기 후크의 Vuex 상태 업데이트

안녕하세요, 저는 Nux에서 Vuex를 사용하고 있습니다.

h2를 언급하고 클릭 버튼을 클릭하면 스토어 변수 카운터가 변경되어도 라이프사이클 훅업데이트()가 실행되지 않습니다.

내가 코멘트를 달면 h2 line updated() 라이프사이클 후크는 클릭할 때마다 실행됩니다.

템플릿에서 사용하지 않고 구성 요소의 스토어 카운터에서 업데이트된 변경 사항을 가져오려면 어떻게 해야 합니까?

<template>
  <div>
    <!-- <h2>{{ counter }}</h2> -->
    <button @click="onSubmit">click</button>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'

const { mapState } = createNamespacedHelpers('profile')

export default {
  name: 'App',
  methods: {
    onSubmit() {
      console.log('clicked')
      this.$store.commit('profile/increment', 1)
    },
  },
  computed: {
    ...mapState(['counter']),
  },
  created() {
    console.log('created', this.$store.state.profile.counter)
  },
  updated() {
    console.log('updated', this.$store.state.profile.counter)
    console.log('updated', this.counter)
  },
}
</script>

가게

export const state = () => ({
  counter: 0,
})

export const mutations = {
  increment(state) {
    state.counter++
  },
}

vue가 구성 요소를 다시 렌더링하기로 결정하면 updated()hook이 호출됩니다.따라서 템플릿에서 카운터 값을 사용하지 않으면 다시 렌더링할 필요가 없으므로 update()가 호출되지 않습니다.

카운터가 업데이트될 때마다 일부 코드를 실행하려면 감시자가 필요합니다.

watch: {
  '$store.state.profile.counter'(val) {
    console.log(`The counter was updated. New value is ${val}`)
  }
}

언급URL : https://stackoverflow.com/questions/71817595/vuex-state-updates-in-updated-life-cycle-hook