vuex store의 replaceState 함수가 호출될 때 알 수 있는 방법이 있습니까?

vuex store의 replaceState 함수가 호출될 때 알 수 있는 방법이 있습니까?

사용 중vuex-presistedstate내 프로젝트에서.github의 소스 코드에서 플러그인이 호출합니다.store.replaceState저장소에서 저장소로 수분을 공급합니다.가게가 언제 수분을 공급하는지 알 수 있는 방법이 있습니까?

그vuex-presistedstate플러그인에 다음과 같은 구성 옵션이 있습니다.rehydrated바로 다음에 호출될 함수를 전달할 수 있습니다.replaceState만약 당신이 전화만 신경 쓴다면.replaceState플러그인을 사용하면 필요에 잘 맞을 것입니다.

나는 가게 자체가 언제를 위한 '후크'를 제공한다고 생각하지 않습니다.replaceState이 호출됩니다.방법replaceState다음과 같이 구현됩니다.

https://github.com/vuejs/vuex/blob/e0126533301febf66072f1865cf9a77778cf2176/src/store.js#L183

코드에서 알 수 있듯이, 그것은 많은 것을 하지 않습니다.가입자도 다음을 사용하여 등록했습니다.subscribe호출되지 않았습니다.그러나 잠재적으로 사용할 수 있습니다.watch상태 내의 특정 속성에 감시자를 등록하고 이를 사용하여 상태가 교체되는 시점을 탐지합니다.

https://vuex.vuejs.org/api/ #watch

물론 당신은 구조화에 주의할 필요가 있을 것입니다. 그래야 당신은 전화만 할 수 있습니다.replaceState감시자를 트리거합니다. 이는 불안정하게 될 수 있습니다.

추가적인 대안은 패치/오버라이드입니다.replaceState방법.원본을 호출하는 고유한 방법으로 대체하여 필요한 추가 기능을 위한 후크 포인트를 제공합니다.

아래 예제에서 위의 모든 내용을 시연해 보았습니다.

// Can't use localStorage in an SO snippet...
const fakeStorage = {
  vuex: `{"flag": {}, "number": ${Math.random()}}`
}

const storage = {
  getItem (key) {
    return fakeStorage[key]
  },
  
  setItem (key, value) {
    fakeStorage[key] = value
  },
  
  removeItem (key) {
    delete fakeStorage[key]
  }
}

// Override replaceState with our own version
class StoreOverride extends Vuex.Store {
  replaceState (...args) {
    super.replaceState(...args)
    console.log('replaceState called')
  }
}

const store = new StoreOverride({
  state: {
    flag: {},
    number: 0
  },
  
  plugins: [
    createPersistedState({
      rehydrated () {
        console.log('rehydrated called')
      },
      
      storage
    })
  ]
})

store.subscribe(() => {
  console.log('store.subscribe called (will not happen for replaceState)')
})

store.watch(state => state.flag, () => {
  console.log('store.watch called')
})

console.log('creating Vue instance')

new Vue({
  el: '#app',
  store,
  
  methods: {
    onReplace () {
      // The property 'number' is changed so we can see something happen
      this.$store.replaceState({
        flag: {},
        number: this.$store.state.number + 1
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script>
Vue.config.devtools = false
Vue.config.productionTip = false
</script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
<script src="https://unpkg.com/vuex-persistedstate@2.7.0/dist/vuex-persistedstate.umd.js"></script>

<div id="app">
  <button @click="onReplace">Replace</button>
  <p>{{ $store.state.number }}</p>
</div>

다시 쓸 수 있습니다.store.replaceState:

import store from './your/path/to/store'
// ...
store.replaceState = (fn => (...params) => {
  console.log('do something before replaceState called')
  fn.apply(store, params)
  console.log('do something after replaceState called')
})(store.replaceState)

이런 식으로 여러분은 시청할 수 있을 뿐만 아니라replaceState하지만 어떤 방법이든store당신이 원한다면 예를 들어보세요.

언급URL : https://stackoverflow.com/questions/59737839/is-there-a-way-to-know-when-the-replacestate-function-of-vuex-store-is-called