글로벌 데이터 공유를 달성하기 위해 Vue 3에서 상태 관리자 Vuex 4를 사용하는 방법에 대한 자세한 설명

Vue 3은 사용자 인터페이스 구축에 일반적으로 사용되는 인기 있는 JavaScript 프레임워크입니다. 글로벌 데이터 공유를 위해 상태 관리자 Vuex와 쉽게 결합할 수 있습니다. 이 기사에서는 개발자가 이 강력한 상태 관리 도구를 더 잘 이해하고 적용할 수 있도록 Vue 3의 새 버전인 Vuex 4의 사용 방법을 살펴보겠습니다.

먼저 Vuex 4를 설치해야 합니다. Vue 3 프로젝트에서는 npm 또는 Yarn 명령을 사용하여 최신 버전의 Vuex를 설치할 수 있습니다.

npm install vuex@next

또는

yarn add vuex@next

설치가 완료되면 Vue 3의 항목 파일에서 Vuex 모듈을 가져오고 createApp 함수를 사용하여 Vue 애플리케이션 인스턴스를 생성합니다. createApp函数创建Vue应用程序实例。

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
  // 这里定义Vuex的状态和操作
})

const app = createApp(App)
app.use(store)
app.mount('#app')

在上述代码中，我们使用createStore函数创建了一个Vuex的store实例，并将其作为插件使用，以便在整个应用程序中使用Vuex进行状态管理。

接下来，让我们了解Vuex 4中最重要的两个概念：状态（state）和操作（mutation）。

状态是应用程序中的数据源，可以在任何组件中访问。操作是用于修改状态的方法，它们通过同步的方式来改变状态。在Vuex 4中，状态和操作都是使用纯函数的方式来定义的。

例如，我们可以在Vuex中定义一个counter状态和一个increment操作。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

在上述代码中，我们定义了一个初始状态counter为0，并且定义了一个名为increment的操作，它可以通过state.counter++来增加计数器的值。

在组件中使用Vuex的状态和操作非常简单。可以通过$store对象来访问状态和操作。

export default {
  methods: {
    incrementCounter() {
      this.$store.commit('increment')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}

在上述代码中，我们通过commit方法来触发increment操作，并使用state方法来获取counter状态的当前值。

除了状态和操作，Vuex 4还引入了新的特性：动作（action）和getter。

动作是通过异步方式来操作状态的函数。在Vuex 4中，可以通过actions属性来定义动作。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在上述代码中，我们定义了一个名为asyncIncrement的动作，它通过setTimeout函数来模拟异步操作，并在1秒后触发increment操作。

Getter是用于获取状态的计算属性。在Vuex 4中，可以通过getters属性来定义getter。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  getters: {
    doubleCounter(state) {
      return state.counter * 2
    }
  }
})

在上述代码中，我们定义了一个名为doubleCounter的getter，它返回counter状态的两倍。

在组件中使用动作和getter与使用操作和状态类似。可以通过$store.dispatch方法来触发动作，并通过$store.getters属性来获取getter的值。

export default {
  methods: {
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    },
    doubleCounter() {
      return this.$store.getters.doubleCounter
    }
  }
}

在上述代码中，我们通过this.$store.dispatch方法来触发asyncIncrement动作，并通过this.$store.getters.doubleCounter来获取doubleCounterrrreee

위 코드에서는 createStore 함수를 사용하여 Vuex 스토어 인스턴스를 생성하고 이를 플러그인으로 사용하여 애플리케이션 전체의 상태 관리를 위해 Vuex를 사용합니다.

다음으로 Vuex 4에서 가장 중요한 두 가지 개념인 상태와 돌연변이를 이해해 보겠습니다. 🎜🎜State는 애플리케이션의 데이터 소스이며 모든 구성 요소에서 액세스할 수 있습니다. 작업은 상태를 수정하는 데 사용되는 방법입니다. 동기식으로 상태를 변경합니다. Vuex 4에서는 상태와 작업이 순수 함수를 사용하여 정의됩니다. 🎜🎜예를 들어 Vuex에서는 counter 상태와 increment 작업을 정의할 수 있습니다. 🎜rrreee🎜위 코드에서는 초기 상태 counter를 0으로 정의하고 counter++를 전달할 수 있는 increment라는 연산을 정의합니다. code>를 사용하여 카운터 값을 증가시킵니다. 🎜🎜구성 요소에서 Vuex 상태와 작업을 사용하는 것은 매우 간단합니다. 상태와 작업은 $store 개체를 통해 액세스할 수 있습니다. 🎜rrreee🎜위 코드에서는 commit 메서드를 통해 increment 작업을 트리거하고 state 메서드를 사용하여 를 얻습니다. countercode>상태의 현재 값입니다. 🎜🎜Vuex 4에는 상태 및 작업 외에도 작업 및 게터라는 새로운 기능도 도입되었습니다. 🎜🎜액션은 상태에 대해 비동기적으로 작동하는 함수입니다. Vuex 4에서는 actions 속성을 ​​통해 작업을 정의할 수 있습니다. 🎜rrreee🎜위 코드에서는 setTimeout 함수를 통해 비동기 작업을 시뮬레이션하고 1초 증가 후 를 트리거하는 <code>asyncIncrement라는 작업을 정의합니다. 작업. 🎜🎜Getter는 상태를 가져오는 데 사용되는 계산된 속성입니다. Vuex 4에서는 getters 속성을 ​​통해 getter를 정의할 수 있습니다. 🎜rrreee🎜위 코드에서는 counter의 상태를 두 배로 반환하는 doubleCounter라는 getter를 정의했습니다. 🎜🎜구성요소에서 액션과 게터를 사용하는 것은 작업과 상태를 사용하는 것과 유사합니다. $store.dispatch 메소드를 통해 액션을 실행할 수 있고, $store.getters 속성을 ​​통해 getter 값을 얻을 수 있습니다. 🎜rrreee🎜위 코드에서는 this.$store.dispatch 메서드를 통해 asyncIncrement 작업을 트리거하고 this.$store.getters를 전달합니다. doubleCounter를 사용하여 <code>doubleCounter 값을 가져옵니다. 🎜🎜요약하자면 Vuex 4는 Vue 3 애플리케이션에서 글로벌 데이터 공유를 관리하는 편리한 방법을 제공합니다. 상태, 작업, 작업 및 getter를 정의함으로써 데이터를 쉽게 공유하고 관리할 수 있습니다. 이 글이 Vuex 4의 사용법과 원리를 더 잘 이해하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 글로벌 데이터 공유를 달성하기 위해 Vue 3에서 상태 관리자 Vuex 4를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!