Vuex를 고급으로 사용하는 방법

이번에는 vuex를 고급 방식으로 사용하는 방법과 vuex를 고급 방식으로 사용할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 함께 살펴보겠습니다.

1. Getter

먼저 이전 기사의 코드를 기억해 봅시다

computed:{
  getName(){
   return this.$store.state.name
  }
}

이제 로직이 변경되었고, 최종적으로 얻을 것으로 예상되는 데이터(getName)는 this.$store.state를 기반으로 한다고 가정합니다. name 이 getName은 여러 곳에서 사용되기 때문에 여러 번 복사해야 합니다.

vuex는 getter를 제공합니다. 코드(파일 위치/src/store/index)를 참조하세요. .js)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed -----------------以下5行为新增
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 }
})

그런 다음 파일 위치/src/main.js를 이렇게 사용할 수 있습니다

computed:{
  getName(){
   return this.$store.getters.getReverseName
  }
}

사실 getter는 캡슐화 역할을 할 뿐만 아니라 vue의 계산된 속성과 같은 결과 데이터도 캐시합니다. 종속성이 변경된 경우에만 다시 계산해야 합니다.

2. actions 및 $dispatch

주의 깊게 보면 이전 코드의 mutations 헤더에 대한 주석이 다음과 유사하다는 것을 알 수 있습니다. vue에 있는 메소드(동기 메소드)

메소드 다음에 나오는 동기화 메소드는 무엇인가요? Mutation은 동기화 함수만 가능합니다. 설명을 참조하세요. of vuex:

이제 앱을 디버깅하고 devtool mutation log in 을 관찰한다고 상상해 보세요. 변형이 기록될 때마다 devtools는 이전 상태와 다음 상태의 스냅샷을 캡처해야 합니다. 그러나 위의 예에서 돌연변이의 비동기 함수에 있는 콜백은 이를 불가능하게 만듭니다. 왜냐하면 돌연변이가 실행될 때 콜백 함수가 아직 호출되지 않았기 때문에 devtools는 콜백 함수가 실제로 호출되는 시기를 알지 못하기 때문입니다. 콜백 함수 내에서 변경된 상태는 추적할 수 없습니다.
그래서 비동기 작업을 실행하려면 어떻게 해야 할까요? 대답은: action + $dispatch입니다. 계속해서 store/index.js

파일 위치/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 },
 // 类似 vue 里的 mothods(异步方法) -------- 以下7行为新增
 actions: {
  updateNameAsync ({ commit }) {
   setTimeout(() => {
    commit('updateName')
   }, 1000)
  }
 }
})

아래 코드를 수정합니다. 우리는 이것을 우리 vue 페이지에서 사용할 수 있습니다

methods: {
  rename () {
    this.$store.dispatch('updateNameAsync')
  }
}

3. Module Modularization

프로젝트가 점점 커지면 단일 스토어 파일은 확실히 우리가 원하는 것이 아니기 때문에 src가 있다고 가정합니다. /store 디렉터리에 2개의 파일이 있습니다

moduleA.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

moduleB.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

그러면 index.js를 this

import moduleA from './moduleA'
import moduleB from './moduleB'
export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

로 변경할 수 있습니다. 이 글의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 앞으로 더욱 흥미진진해질 것입니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 도서:

v-model을 사용하는 방법과 vue 팝업 구성 요소 구현을 약속하는 방법

JS를 사용하여 파일 드래그 앤 드롭 업로드를 구현하는 방법

위 내용은 Vuex를 고급으로 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!