Vuex 모듈러(모듈) 예제에 대한 자세한 설명

이 글은 주로 Vuex 모듈성을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고할 수 있기를 바랍니다.

1. 모듈화가 필요한 이유

앞서 이야기한 예제는 모두 상태 트리에서 수행됩니다. 프로젝트가 상대적으로 크면 모든 상태가 모여 상대적으로 큰 객체가 나타납니다. , 유지하기가 어렵습니다. 이 문제를 해결하기 위해 Vuex를 사용하면 저장소를 모듈로 나눌 수 있습니다. 각 모듈에는 고유한 상태, 돌연변이, 동작, getter가 있으며 아래에서 모듈을 중첩할 수도 있습니다

const moduleA = {
 state: {....},
 mutations: {....},
 actions: {....},
 getters: {....}
}

const moduleB = {
 state: {....},
 mutations: {....},
 actions: {....},
 getters: {....}
}

const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
 }
})

store.state.a // moduleA的状态
store.state.b // moduleB的状态

2 . 모듈의 로컬 상태

모듈 내부의 변이와 게터, 수신된 첫 번째 매개변수(상태)는 모듈의 로컬 상태 객체인 rootState

const moduleA = {
 state: { count: 0},
 mutations: {
 increment (state) {
  // state是模块的局部状态，也就是上面的state
  state.count++
 }
 },
 getters: {
 doubleCount (state, getters, rootState) {
  // 参数 state为当前局部状态，rootState为根节点状态
  return state.count * 2
 }
 },
 actions: {
 incremtnIfOddRootSum ( { state, commit, rootState } ) {
  // 参数 state为当前局部状态，rootState为根节点状态
  if ((state.cont + rootState.count) % 2 === 1) {
  commit('increment')
  }
 }
 }
}

3입니다(여기에서 읽어보세요. 그렇지 않은 경우도 있습니다). 속이게 됩니다)

위의 모든 예에서 모듈 내부의 액션, 변이, 게터는 전역 네임스페이스에 등록됩니다. moduleB 각각, store.commit('some')을 사용하면 모듈 A와 B가 동시에 응답합니다. 따라서 모듈을 더 독립적이고 재사용 가능하게 만들고 싶다면 네임스페이스 모듈을 네임스페이스 모듈로 만들기 위해 네임스페이스를 추가할 수 있습니다. 모듈이 등록되면 모든 게터, 작업 및 변형은 모듈에 의해 등록된 경로에 따라 자동으로 전체 이름을 호출합니다. 예:

const store = new Vuex.Store({
 modules: {
 account: {
  namespaced: true,
  state: {...}, // 模块内的状态已经是嵌套的，namespaced不会有影响
  getters: {  // 每一条注释为调用方法
  isAdmin () { ... } // getters['account/isAdmin']
  },
  actions: {
  login () {...} // dispatch('account/login')
  },
  mutations: {
  login () {...} // commit('account/login')
  },
  modules: {  // 继承父模块的命名空间
  myPage : {
   state: {...},
   getters: {
   profile () {...}  // getters['account/profile']
   }
  },
  posts: { // 进一步嵌套命名空间
   namespaced: true,
   getters: {
   popular () {...} // getters['account/posts/popular']
   }
  }
  }
 }
 }
})

네임스페이스를 활성화하는 게터 및 작업은 지역화된 게터, 디스패치, 그리고 커밋합니다. 모듈 콘텐츠를 사용할 때 동일한 모듈에 공간 이름 접두사를 추가할 필요가 없으며 네임스페이스 속성을 변경한 후 모듈의 코드를 수정할 필요가 없습니다.

4. 네임스페이스 모듈에서 전역 콘텐츠(전역 자산)에 액세스합니다.

전역 상태 및 getter를 사용하려면 rootState 및 rootGetter가 세 번째 및 네 번째 매개변수로 getter에 전달되고 액션을 배포하거나 액션을 입력할 때 전역 네임스페이스에 변형을 제출해야 하는 경우 디스패치 또는 커밋할 세 번째 매개변수로 { root: true }를 전달하면 됩니다.

modules: {
 foo: {
 namespaced: true,
 getters: {
  // 在这个被命名的模块里，getters被局部化了
  // 你可以使用getter的第四个参数来调用 'rootGetters'
  someGetter (state, getters, rootSate, rootGetters) {
  getters.someOtherGetter // -> 局部的getter， ‘foo/someOtherGetter'
  rootGetters.someOtherGetter // -> 全局getter, 'someOtherGetter'
  }
 },
 actions: {
  // 在这个模块里，dispatch和commit也被局部化了
  // 他们可以接受root属性以访问跟dispatch和commit
  smoeActino ({dispatch, commit, getters, rootGetters }) {
  getters.someGetter // 'foo/someGetter'
  rootGetters.someGetter // 'someGetter'
  dispatch('someOtherAction')  // 'foo/someOtherAction'
  dispatch('someOtherAction', null, {root: true}) // => ‘someOtherAction'
  commit('someMutation') // 'foo/someMutation'
  commit('someMutation', null, { root: true }) // someMutation
  }
 }
 }
}

5. 네임스페이스를 사용한 바인딩 함수

앞서 언급했듯이 네임스페이스를 가져온 후 호출 시 네임스페이스를 작성해야 하지만 이는 더욱 번거로우며, 특히 여러 수준의 중첩이 포함될 경우(물론 개발에서는 중첩하지 마십시오.) )

일반적인 작성 방법을 살펴보겠습니다

computed: {
 ...mapState({
 a: state => state.some.nested.module.a,
 b: state => state.some.nested.module.b
 }),
 methods: {
 ...mapActions([
  'some/nested/module/foo',
  'some/nested/module/bar'
 ])
 }
}

이 경우 위 함수의 첫 번째 매개변수로 모듈의 네임스페이스를 전달하면 이 모듈이 자동으로 바인딩됩니다. 컨텍스트로 사용됩니다. 단순화된 쓰기는

computed: {
 ...mapStates('some/nested/module', {
 a: state => state.a,
 b: state => state.b
 })
},
methods: {
 ...mapActions('some/nested/module',[
 'foo',
 'bar'
 ])
}

6. 모듈 재사용

때로는 모듈의 여러 인스턴스를 만들 수 있습니다. 예:

• 여러 상점을 만들고 모듈을 공유합니다.

• 한 상점에 ​​동일한 모듈을 여러 번 등록합니다. 모듈
  

모듈의 상태를 선언하기 위해 순수 객체를 사용한다면, 이 상태 객체는 참조를 통해 공유되어 데이터가 서로 오염될 수 있습니다.
사실 Vue 컴포넌트의 데이터도 같은 문제가 있어서 해결 방법도 같습니다. 모듈 상태를 선언하는 함수를 사용하세요. (2.3.0+에서 지원)

const MyModule = {
 state () {
 return {
  foo: 'far'
 }
 }
}

7. 요약

내용은 동일합니다. 모듈은 여기까지입니다. 이번에는 모듈이 나타나는 이유, 사용 방법, 전역 및 로컬 네임스페이스 모듈 네임스페이스, 전역 콘텐츠에 대한 로컬 액세스, 네임스페이스와 맵 함수의 바인딩 기능 및 모듈 재사용에 대해 주로 설명합니다. ㅋㅋㅋ

간단한 Vuex 및 모듈화 배우기

위 내용은 Vuex 모듈러(모듈) 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!