Vuex 의 열 교 체 는 어떻게 실현 합 니까?

머리말
우 리 는 Vuex 를 사용 할 때 수시로 Vuex 안의 데 이 터 를 변경 하지만 페이지 는 이에 따라 업데이트 되 지 않 습 니 다.만약 에 데이터 의 양 이 많 고 한 데이터 가 다른 데이터 에 의존 하면 우리 가 페이지 를 다시 새로 고치 면 예전 에 의존 하 던 데 이 터 를 비우 고 효율 이 매우 낮 습 니 다.그래서 오늘 나 는 Vuex 열 교체 기능 을 어떻게 실현 하 는 지 정리 했다.
이루어지다
우선,우 리 는 Vue CLI 3 를 사용 했다.루트 디 렉 터 리 아래 src 디 렉 터 리 아래 에 Vuex 를 저장 하 는 폴 더 가 있 습 니 다.store 폴 더 라 고 합 니 다.우선 우 리 는 몇 개의 모듈 로 나 누 었 다.

다음 에 우 리 는 그것들 을 각각 도입 합 니 다.여 기 는 actions 를 분할 하지 않 았 지만 다른 속성 과 같 습 니 다.여 기 는 소개 하지 않 습 니 다.다음은 index.js 에서 다음 코드 를 편집 합 니 다.

import Vuex from 'vuex'
//        
import state from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'

export default ()=>{
//         store  
 const store = new Vuex.Store({
  state:state,
  mutations:mutations,
  getters:getters
 })
 //      
 if(module.hot){
 //      ，           
  module.hot.accept([
   './state/state',
   './mutations/mutations',
   './getters/getters'
  ],()=>{
  //      
   const newState = require('./state/state').default
   const newMutations = require('./mutations/mutations').default
   const newGetters = require('./getters/getters').default
   store.hotUpdate({
    state:newState,
    mutations:newMutations,
    getters:newGetters
   })
  })
 }
 
 return store
}

우 리 는 main.js 에서 수정 해 야 합 니 다.

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import createStore from './store/index.js'

Vue.config.productionTip = false

Vue.use(Vuex)
const store=createStore();

new Vue({
 store,
 render: h => h(App)
}).$mount('#app')

기타 api

// store.registerModule({ //      
// })

//    getter
// store.watch((state)=>state.count+1,(newCount)=>{
//  console.log('new count watched , '+newCount)
// })

// mutation    
// store.subscribe((mutation,state)=>{
//  console.log(mutation.type)
//  console.log(mutation.payload)
// })

// action    
// store.subscribeAction((action,state)=>{
//  console.log(action.type)
//  console.log(action.payload)
// }) 

결어
이상 Vuex 의 열 교체 기능 을 완 료 했 습 니 다.주의해 야 할 것 은 state 에서 직접 변경 하면 효과 가 보이 지 않 습 니 다!
Vuex 의 핫 체인 지가 어떻게 이 루어 지 는 지 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vuex 핫 체인 지 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 사랑 해 주세요!