Vue.js 2.0에 대한 Vuex 2.0 업데이트해야 할 지식 기반

애플리케이션 구조

사실 Vuex는 코드 구조를 구성하는 방법에 제한이 없습니다. 반대로 일련의 상위 수준 원칙을 시행합니다.

1. level 상태는 매장 내에서 중앙 집중화됩니다.

2. 상태를 변경하는 유일한 방법은 동기 트랜잭션인 mutation을 제출하는 것입니다.

3. 비동기 로직은 실제로 캡슐화되어야 합니다.

이러한 규칙을 따르는 한 프로젝트 구성 방법은 귀하에게 달려 있습니다. 스토어 파일이 매우 크다면 액션, 뮤테이션, 게터 파일로 분할하세요.

약간 더 복잡한 애플리케이션의 경우 모듈을 사용해야 할 수도 있습니다. 다음은 간단한 프로젝트 구조입니다:

├── index.html
├── main.js
├── api
│ └── ... # 여기에서 API 실행 요청
├── 구성요소
│ ├── App.vue
│ └── ...
└── store
├── index.js
├── actions.js ├── actions.js ├── mutations.js # 루트 변이
└── 모듈
├── cart.js # 장바구니 모듈
└── products .js # 제품 모듈

자세한 내용은 장바구니 예시를 참조하세요.

모듈

단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 하나의 큰 개체에 포함됩니다. 그러나 애플리케이션의 규모가 계속해서 커지면서 이 스토어는 매우 비대해졌습니다.

이 문제를 해결하기 위해 Vuex에서는 스토어를 모듈로 나눌 수 있습니다. 각 모듈에는 자체 상태, 변이, 작업 및 getter가 포함되어 있으며 중첩된 모듈도 포함되어 있습니다.

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
}
 
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}
 
const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
 }
})
 
store.state.a // -> moduleA's state
store.state.b // -> moduleB's state

모듈 로컬 상태

모듈의 mutations 및 getters 메소드가 전달하는 첫 번째 매개변수는 모듈의 로컬 상태입니다.

const moduleA = {
 state: { count: 0 },
 mutations: {
 increment: (state) {
  // state 是模块本地的状态。
  state.count++
 }
 },
 
 getters: {
 doubleCount (state) {
  return state.count * 2
 }
 }
}

마찬가지로 모듈의 작업에서 context.state는 로컬 상태를 노출하고 context.rootState는 루트 상태를 노출합니다.

const moduleA = {
 // ...
 actions: {
 incrementIfOdd ({ state, commit }) {
  if (state.count % 2 === 1) {
  commit('increment')
  }
 }
 }
}

모듈의 getter에서는 루트 상태도 세 번째 매개변수로 노출됩니다.

const moduleA = {
 // ...
 getters: {
 sumWithRootCount (state, getters, rootState) {
  return state.count + rootState.count
 }
 }
}

네임스페이스

모듈 내의 액션, 변이 및 게터는 여전히 전역 네임스페이스에 등록되어 있습니다. 여러 모듈이 동일한 돌연변이/작업 유형에 응답할 수 있습니다. 이름 충돌을 방지하기 위해 모듈 이름에 접두사 또는 접미사를 추가하여 네임스페이스를 설정할 수 있습니다. Vuex 모듈이 재사용 가능하고 실행 환경을 알 수 없는 경우 이 작업을 수행해야 합니다. 거리, 할일 모듈을 생성하고 싶습니다:

// types.js
 
// 定义 getter、 action 和 mutation 的常量名称
// 并且在模块名称上加上 `todos` 前缀
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
// modules/todos.js
import * as types from '../types'
 
// 用带前缀的名称来定义 getters, actions and mutations
const todosModule = {
 state: { todos: [] },
 
 getters: {
 [types.DONE_COUNT] (state) {
  // ...
 }
 },
 
 actions: {
 [types.FETCH_ALL] (context, payload) {
  // ...
 }
 },
 
 mutations: {
 [types.TOGGLE_DONE] (state, payload) {
  // ...
 }
 }
}

동적 모듈 등록

스토어를 사용하여 스토어에서 생성할 수 있습니다. .registerModule 메소드 그런 다음 모듈을 등록합니다:

store.registerModule('myModule', {
 // ...
})

모듈의 store.state.myModule이 모듈의 상태로 노출됩니다.

다른 Vue 플러그인은 애플리케이션 스토어에 모듈을 부착한 후 동적 등록을 통해 Vuex의 상태 관리 기능을 사용할 수 있습니다. 예를 들어, vuex-router-sync 라이브러리는 동적으로 등록된 모듈에서 애플리케이션의 라우팅 상태를 관리하여 vue-router와 vuex를 통합합니다.

store.unregisterModule(moduleName)을 사용하여 동적으로 등록된 모듈을 제거할 수도 있습니다. 그러나 이 방법을 사용하여 정적 모듈(즉, 저장소가 생성될 때 선언된 모듈)을 제거할 수는 없습니다.

플러그인

Vuex 매장은 각 변이에 대한 후크를 노출하는 플러그인 옵션을 받습니다. Vuex 플러그인은 sotre를 유일한 매개변수로 받아들이는 간단한 방법입니다:

const myPlugin = store => {
 // 当 store 在被初始化完成时被调用
 store.subscribe((mutation, state) => {
 // mutation 之后被调用
 // mutation 的格式为 {type, payload}。
 })
}

다음과 같이 사용합니다:

const store = new Vuex.Store({
 // ...
 plugins: [myPlugin]
})

플러그인 내에서 변형 제출

플러그인은 상태를 직접 수정할 수 없습니다. 구성 요소와 마찬가지로 변형에 의해서만 트리거될 수 있습니다.

변이를 제출하면 플러그인을 사용하여 데이터 소스를 스토어에 동기화할 수 있습니다. 예를 들어, websocket 데이터 소스를 저장소에 동기화하기 위해(이는 사용법을 설명하기 위한 예시일 뿐이며 실제로는 createPlugin 메소드에 복잡한 작업을 완료하기 위한 더 많은 옵션이 추가됩니다).

export default function createWebSocketPlugin (socket) {
 return store => {
 socket.on('data', data => {
  store.commit('receiveData', data)
 })
 store.subscribe(mutation => {
  if (mutation.type === 'UPDATE_DATA') {
  socket.emit('update', mutation.payload)
  }
 })
 }
}

const plugin = createWebSocketPlugin(socket)
 
const store = new Vuex.Store({
 state,
 mutations,
 plugins: [plugin]
})

상태 스냅샷 생성

때때로 플러그인이 상태를 가져오려고 합니다. " 스냅샷" 및 상태는 변경 전후에 변경됩니다. 이러한 기능을 구현하려면 상태 개체의 전체 복사본이 필요합니다.

const myPluginWithSnapshot = store => {
 let prevState = _.cloneDeep(store.state)
 store.subscribe((mutation, state) => {
 let nextState = _.cloneDeep(state)
 
 // 对比 prevState 和 nextState...
 
 // 保存状态，用于下一次 mutation
 prevState = nextState
 })
}

** 상태 스냅샷을 생성하는 플러그인은 개발 단계에서 Webpack 또는 Browserify를 사용하여 빌드 도구에서 처리하도록 하세요.

const store = new Vuex.Store({
 // ...
 plugins: process.env.NODE_ENV !== 'production'
 ? [myPluginWithSnapshot]
 : []
})

플러그인은 기본적으로 활성화됩니다. . 프로덕션으로 배송하려면 Webpack의 DefinePlugin 또는 Browserify의 enify를 사용하여 process.env.NODE_ENV !== 'production'을 false로 변환해야 합니다.

내장 로거 플러그인

如果你正在使用 vue-devtools，你可能不需要。

Vuex 带来一个日志插件用于一般的调试:

import createLogger from 'vuex/dist/logger'
 
const store = new Vuex.Store({
 plugins: [createLogger()]
})

createLogger 方法有几个配置项：

const logger = createLogger({
 collapsed: false, // 自动展开记录 mutation
 transformer (state) {
 // 在记录之前前进行转换
 // 例如，只返回指定的子树
 return state.subTree
 },
 mutationTransformer (mutation) {
 // mutation 格式 { type, payload }
 // 我们可以按照想要的方式进行格式化
 return mutation.type
 }
})

日志插件还可以直接通过

저자별 최신 기사

• HTML에서 굵게, 기울임꼴, 밑줄, 취소선 등 글꼴 효과를 설정하는 예를 소개합니다.
  1970-01-01 08:00:00
• Java 버전의 Redis 구현
  1970-01-01 08:00:00
• 가장 간단한 WeChat 애플릿 데모
  1970-01-01 08:00:00
• Python에서 pandas.DataFrame(생성, 색인, 추가 및 삭제)의 간단한 작업 방법 소개
  1970-01-01 08:00:00
• 위챗 미니 프로그램: 탭 효과 구현 방법 예시
  1970-01-01 08:00:00
• Python은 사전 구조 출력을 아름답게 하기 위해 사용자 정의 메소드를 구성합니다.
  1970-01-01 08:00:00
• HTML5: Canvas를 사용하여 실시간으로 비디오 처리
  1970-01-01 08:00:00
• Asp.net은 SignalR을 사용하여 사진을 보냅니다.
  1970-01-01 08:00:00
• WeChat Mini 프로그램 개발 튜토리얼-App() 및 Page() 기능 개요
  1970-01-01 08:00:00
• Python Redis 사용법에 대한 자세한 설명
  1970-01-01 08:00:00

최신 이슈

d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...

에서 2024-04-06 18:16:26

0

1

403

전달자 토큰을 처리하는 데 적합한 애플리케이션 아키텍처를 선택하세요. OAuth2.0을 사용하는 API를 사용하고 싶습니다. 즉, 서버가 내 신원을 확인할 수 있도록 모든 후속 요청에 포함해야 하는 액세스 토큰을 얻어야 합니다. 애...

에서 2024-04-04 08:55:57

0

1

353

Vue.js에 대한 API 풀 생성 나에게 무슨 문제가 있는지, 왜 이것이 작동하지 않는지 모르겠습니다. 임의의 개 사진 API가 작동하기를 원하지만 작동하지 않습니다. 아래 코드를 참조하세요. i...

에서 2024-04-03 16:12:29

0

1

363

Vue.js 데이터 값은 변경되지 않습니다. 나는 cat_pressed라는 데이터와 데이터 값을 변경하는 이 함수를 가지고 있습니다:changeCat(){this.cat_pressed===='brauh'} ...

에서 2024-04-03 09:29:23

0

1

369

Vue.js에서 getter 및/또는 계산된 속성을 사용하는 모범 사례 저는 vue.js를 좋아하고 계산된 속성과 VueXgetters도 정말 좋아합니다. 그러나 내가 사용하는 방식이 성능상의 단점을 가져올지 확신할 수 없는 지점에 ...

에서 2024-04-01 18:22:49

0

1

431

관련 주제

더>

• vue.js가 오류를 보고하는 이유는 무엇입니까?
• vue.js 슬롯의 용도는 무엇입니까?
• vue.js에서 매개변수를 사용하여 점프하는 방법
• mysql 페이징 방법
• 리눅스 파일 찾기 명령
• 트랜잭션 범위를 사용하는 방법
• Google 어스가 서버 솔루션에 연결할 수 없습니다
• 어떤 그리기 소프트웨어가 있나요?