vuex에 대해 자세히 알아보자

• VuEx란 무엇인가요?
  • Vuex에는 여러 속성과 기능이 있습니다
  • 지침
  • vuex 사용 예
  • Vuex3과 Vuex4의 차이점은 무엇입니까
    • 스토어를 만드는 방법
    • 구성요소에 Store 사용
    • 보조 기능의 활용
    • 반응성 개선
    • Vuex4는 다중 인스턴스 모드를 지원합니다

VuEx란 무엇인가요?

Vuex는 Vue.js 애플리케이션을 위해 특별히 설계된 상태 관리 프레임워크로, 각 Vue 구성 요소의 변경 가능한 상태를 균일하게 관리하고 유지합니다.

Vuex는 중앙 집중식 스토리지를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리 하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.

Vuex는 Vue의 공식 디버깅 도구 devtools 확장에도 통합되어 제로 구성 시간 이동 디버깅, 상태 스냅샷 가져오기 및 내보내기 등과 같은 고급 디버깅 기능을 제공합니다.

Vuex는 형제 구성 요소 간의 통신, 다중 계층 중첩 구성 요소 간의 값 전송 등과 같은 복잡한 애플리케이션의 데이터 상태를 관리할 수 있습니다.

여러 구성 요소가 동일한 상태에 의존하는 경우 여러 레이어의 중첩으로 인해 매개 변수 전달 방법이 복잡해집니다. 또한 부모-자식 구성 요소를 사용하여 이벤트를 직접 참조하거나 사용하여 상태의 여러 복사본을 변경하고 동기화하는 경우 패턴이 취약해지고 코드를 유지할 수 없게 됩니다.

이때 이 문제를 해결하려면 Vuex를 사용해야 합니다.

자세한 내용을 보려면 WeChat에서 " 前端爱好者"를 검색 하고 나를 클릭하여 확인 하세요 .

Vuex에는 여러 속성과 기능이 있습니다

Vuex에는 다음을 포함한 5가지 주요 속성이 있습니다.

• 상태,
• 게터、
• 돌연변이、
• 행위,
• 모듈**

해당 기능은 아래에 설명되어 있습니다.

1. state: 변수를 저장하는 데 사용되는 vuex의 기본 데이터입니다.
2. getters: 기본 데이터(상태)에서 파생된 데이터로, 상태의 계산된 속성과 동일합니다.
3. 돌연변이: 업데이트된 데이터를 제출하는 방법은 동기식이어야 합니다( 작업을 비동기식으로 사용해야 하는 경우 ). 각 변형에는 문자열 이벤트 유형(유형)과 콜백 함수(핸들러)가 있습니다. 콜백 함수는 실제 상태 변경이 이루어지는 곳이며 상태를 첫 번째 매개변수로 받아들이고 제출 페이로드를 두 번째 매개변수로 받아들입니다.
4. Actions: 이 함수는 mutation과 거의 동일합니다. 차이점은 action이 상태를 직접 변경하는 대신 mutation을 제출한다는 것입니다 . 또한 작업에는 모든 비동기 작업이 포함될 수 있습니다. 간단히 말해서 데이터를 비동기적으로 작동하고 뷰 계층은 store.dispath를 통해 작업을 배포합니다 .
5. 모듈: 모듈식 vuex를 사용하면 각 모듈에 고유한 상태, 돌연변이, 동작 및 게터가 있어 구조가 매우 명확하고 관리하기 쉽습니다.

지침

• 읽기에만 사용되는 상태는 저장소에 집중되어 있으며, 상태를 변경하는 방법은 동기식인 돌연변이를 제출하는 것입니다. 비동기 로직은 작업에 캡슐화되어야 합니다.
• main.js에 store를 소개하고 . 새 디렉토리 저장소 생성, ... 내보내기
• 시나리오에는 다음이 포함됩니다. 단일 페이지 애플리케이션에서 구성 요소 간 상태, 음악 재생, 로그인 상태 및 장바구니에 추가

vuex 사용 예

Vuex는 Vue.js용 상태 관리 도구로, 애플리케이션의 여러 구성 요소가 공유하는 상태를 추출하여 균일하게 관리할 수 있게 해줍니다.

다음은 간단한 Vuex 사용 예시입니다:

1. Vuex를 설치합니다:

npm install vuex --save

2. 프로젝트에 Vuex를 도입하고 Vuex Store를 만듭니다.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 0,
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count++;
    },
    decrement(state) {
    
    
      state.count--;
    },
  },
});

위 코드에서는 Vuex Store를 생성하고 상태와 두 가지 돌연변이 메서드를 정의하고 상태 count를 수정합니다 .incrementdecrement

3. Vue 구성 요소에서 Vuex Store를 사용합니다.

import Vue from 'vue';
import store from './store';

new Vue({
    
    
  el: '#app',
  store,
  computed: {
    
    
    count() {
    
    
      return this.$store.state.count;
    },
  },
  methods: {
    
    
    increment() {
    
    
      this.$store.commit('increment');
    },
    decrement() {
    
    
      this.$store.commit('decrement');
    },
  },
});

위 코드에서는 this.$storeVue 컴포넌트를 통해 Vuex Store에 액세스하고, 상태에 this.$store.state.count액세스 하고 , 변형 메서드를 호출하여 상태를 수정합니다.countthis.$store.commit('increment')this.$store.commit('decrement')

위는 Vuex를 사용하는 간단한 예시인데, Vuex를 통해 애플리케이션 내 여러 컴포넌트가 공유하는 상태를 쉽게 관리할 수 있습니다.

Vuex3과 Vuex4의 차이점은 무엇입니까

Vuex 3은 Vue 2용 버전이고 Vuex 4는 Vue 3용 버전입니다.

Vuex 3와 Vuex 4의 몇 가지 중요한 차이점과 유사점은 다음과 같습니다.

스토어를 만드는 방법

Vuex 3 : 다음을 사용하여 new Vuex.Store()저장소 인스턴스를 만듭니다.

import Vue from 'vue'
import Vuex from 'vuex'
​
Vue.use(Vuex)
​
const store = new Vuex.Store({
    
    
  // 配置项
})
​
export default store

Vuex 4 : createStore기능을 사용하여 상점 인스턴스 생성

import {
    
     createStore } from 'vuex'
​
const store = createStore({
    
    
  // 配置项
})
​
export default store

Vuex 4에서는 createStore 함수를 사용하여 Vue 인스턴스에 직접 마운트하는 대신 저장소 인스턴스를 생성합니다.

구성요소에 Store 사용

Vuex 3 :

• this.$store를 사용하여 저장소 인스턴스에 액세스합니다.
• this.$store.state를 통해 상태에 액세스합니다.
• this.$store.commit()을 통해 변형을 제출하세요.
• this.$store.dispatch()를 통해 작업을 디스패치합니다.

export default {
    
    
  computed: {
    
    
    count() {
    
    
      return this.$store.state.count
    }
  },
  methods: {
    
    
    increment() {
    
    
      this.$store.commit('increment')
    },
    incrementAsync() {
    
    
      this.$store.dispatch('incrementAsync')
    }
  }
}

Vuex 4 :

• useStore 함수를 사용하여 저장소 인스턴스를 가져옵니다.
• store.state를 통해 상태에 액세스합니다.
• store.commit()을 통해 변형을 제출합니다.
• store.dispatch()를 통해 작업을 디스패치합니다.

import {
    
     useStore } from 'vuex'
​
export default {
    
    
  setup() {
    
    
    const store = useStore()
    const count = computed(() => store.state.count)
​
    const increment = () => {
    
    
      store.commit('increment')
    }
​
    const incrementAsync = () => {
    
    
      store.dispatch('incrementAsync')
    }
​
    return {
    
    
      count,
      increment,
      incrementAsync
    }
  }
}

Vuex4에서는 저장소 인스턴스를 얻기 위해 Composition API 스타일에 더 가까운 useStore()를 사용할 것을 권장합니다.

그러나 this.$store는 제거되지 않았지만 <template>Vue2 선택적 작성에서는 $store 사용이 계속 지원됩니다.

보조 기능의 활용

Vuex 3 :

매핑에 mapState, mapGetters, mapMutations 및 mapActions 도우미 함수를 사용하여 구성 요소의 저장소 액세스를 단순화합니다.

import {
    
     mapState, mapGetters, mapMutations, mapActions } from 'vuex'
​
export default {
    
    
  computed: {
    
    
    ...mapState(['count']),
    ...mapGetters(['doubleCount']),
  },
  methods: {
    
    
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync']),
  }
}

Vuex 4 : Composition API의 계산된 함수와 일반 JavaScript 함수를 사용하여 유사한 기능을 구현합니다.

import {
    
     computed, useStore } from 'vuex'
​
export default {
    
    
  setup() {
    
    
    const store = useStore()
​
    const count = computed(() => store.state.count)
    const doubleCount = computed(() => store.getters.doubleCount)
​
    const increment = () => {
    
    
      store.commit('increment')
    }
​
    const incrementAsync = () => {
    
    
      store.dispatch('incrementAsync')
    }
​
    return {
    
    
      count,
      doubleCount,
      increment,
      incrementAsync
    }
  }
}

Vuex4는 사용 시 Vuex3과 정확히 동일한 선택적 보조 기능을 지원합니다.

단, 결합 쓰기 설정에서는 보조 기능을 사용할 수 없습니다.

반응성 개선

• Vuex 3: Vue 2의 반응 시스템(Object.defineProperty)을 사용하여 상태를 모니터링하고 업데이트합니다.
• Vuex 4: Vue 3의 반응형 시스템(프록시)을 사용하여 상태를 모니터링하고 업데이트합니다. 보다 유연하고 효율적인 상태 관리를 위해 Composition API의 반응형 및 계산형 함수를 사용할 수 있습니다.

본질적으로 이것이 Vue2와 Vue3의 차이점인데, 단지 Vue 2가 Vuex 3과 일치하고 Vue 3이 Vuex 4와 일치하기 때문일 뿐입니다. 엄밀히 말하면 Vuex3과 Vuex4의 차이로 간주할 수는 없습니다.

Vuex4는 다중 인스턴스 모드를 지원합니다

Vuex 3은 싱글톤 모드입니다. 즉, 전체 애플리케이션은 하나의 전역 Vuex Store 인스턴스만 가질 수 있습니다.

Vuex 4에서는 useStore 함수를 통해 다양한 구성 요소에 여러 개의 독립적인 Vuex Store 인스턴스를 생성하여 다중 인스턴스 모드를 지원할 수 있습니다.

다음은 useStore 도우미 함수를 사용하여 Vuex 4에서 여러 개의 독립적인 Vuex Store 인스턴스를 만드는 방법을 보여주는 예입니다.

<template>
  <div>
    <p>Counter 1: {
    
    {
    
     counter1 }}</p>
    <p>Counter 2: {
    
    {
    
     counter2 }}</p>
    <button @click="incrementCounter1">Increment Counter 1</button>
    <button @click="incrementCounter2">Increment Counter 2</button>
  </div>
</template>
​
<script>
import {
    
     useStore } from 'vuex'
​
export default {
    
    
  setup() {
    
    
    // 使用 useStore 辅助函数创建 Vuex Store 实例
    const store1 = useStore('store1')
    const store2 = useStore('store2')
​
    // 通过 store1.state.count 获取第一个 Store 的状态
    const count1 = store1.state.count
    // 通过 store2.state.count 获取第二个 Store 的状态
    const count2 = store2.state.count
​
    // 通过 store1.commit() 提交 mutations 到第一个 Store
    const incrementCounter1 = () => {
    
    
      store1.commit('increment')
    }
​
    // 通过 store2.commit() 提交 mutations 到第二个 Store
    const incrementCounter2 = () => {
    
    
      store2.commit('increment')
    }
​
    return {
    
    
      count1,
      count2,
      incrementCounter1,
      incrementCounter2
    }
  }
}
</script>

위의 예는 Vue 구성 요소에서 useStore 도우미 함수를 사용하여 여러 개의 독립적인 Vuex Store 인스턴스를 만들고 이러한 인스턴스를 통해 해당 상태 및 변형에 액세스하고 수정하는 방법을 보여줍니다.

이는 Vuex 3에 비해 Vuex 4에서 중요한 개선 사항으로, 여러 인스턴스를 지원하는 시나리오에서 Vuex를 더욱 유연하고 확장 가능하게 만듭니다.

참조 문서

• https://www.jb51.net/article/281760.htm
• Vuex 4 공식 문서: vuex.vuejs.org/zh/
• Vuex 3 공식 문서: v3.vuex.vuejs.org/zh/