VUE3 개발 시작하기: Vuex State Management 사용

VUE3는 성능, 유지 관리성 및 개발 경험을 크게 향상시킨 흥미로운 차세대 VUE 프레임워크입니다. VUE3에서 Vuex는 애플리케이션 상태를 더 잘 관리하는 데 도움이 되는 매우 중요한 상태 관리 도구입니다.

이 글에서는 Vuex 스토어 생성 방법, 컴포넌트에서 Vuex 사용 방법, Vuex에서 비동기 작업 수행 방법, 플러그인 사용 방법 등 VUE3에서 Vuex를 사용하는 방법을 소개합니다.

Vuex 스토어 생성

먼저 Vuex를 설치해야 합니다:

npm install vuex@next

다음으로 Vuex 스토어를 생성하려면 VUE3의 항목 파일(예: main.js)에 다음 코드를 추가할 수 있습니다.

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

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

여기 , createApp 사용을 전달하여 VUE 인스턴스를 생성한 다음 store 플러그인을 사용하여 Vuex 스토어를 애플리케이션에 추가합니다. 이제 저장소 폴더를 만든 다음 내부에 index.js 파일을 만들어야 합니다. createApp创建了一个VUE实例，然后使用了store插件将Vuex store添加到应用程序中。现在我们需要创建一个store文件夹，然后在里面创建一个index.js文件：

import { createStore } from 'vuex'

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

export default store

在这里，我们首先使用createStore函数创建了一个Vuex store，并指定了一个初始状态count: 0。然后，我们定义了一个名为increment的mutation，它以state作为参数，并将state.count递增1。最后，我们将store导出，以便在应用程序中使用。

在组件中使用Vuex

现在我们已经创建了Vuex store，接下来我们将在组件中使用它。我们将在一个Counter组件中使用count和incrementmutation。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

在这里，我们首先使用计算属性count获取store.state.count的当前值，然后在按钮上添加了一个点击事件，调用了incrementmutation。

现在我们可以在应用程序中使用Counter组件，并且它将自动连接到Vuex store。

异步操作

有时，我们需要在Vuex store中执行异步操作，例如发送HTTP请求。在这种情况下，我们可以使用示例代码中的actions选项。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      todos: []
    }
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos
    }
  },
  actions: {
    async fetchTodos({ commit }) {
      const response = await fetch('/api/todos')
      const todos = await response.json()
      commit('setTodos', todos)
    }
  }
})

export default store

在这里，我们首先定义了一个名为setTodos的mutation，并将传入的todos参数设置为state.todos。然后，我们使用actions选项定义了一个名为fetchTodos的操作，它将触发异步操作来获取todos数据，并在完成后调用commit来触发setTodosmutation。

使用插件

我们可以使用插件来扩展Vuex store的功能。例如，我们可以使用vuex-persistedstate插件来使Vuex store持久化，以便每次刷新页面都不会重置store的状态。

首先，我们需要安装插件：

npm install vuex-persistedstate

然后，我们可以将插件添加到store中：

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  // ...
  plugins: [createPersistedState()]
})

export default store

在这里，我们从vuex-persistedstate导入了createPersistedStaterrreee

여기에서는 먼저 createStore 함수를 사용하여 Vuex 저장소를 만들고 초기 상태 개수를 지정합니다. : 0. 그런 다음 state를 매개변수로 사용하고 state.count를 1씩 증가시키는 increment라는 변형을 정의합니다. 마지막으로 애플리케이션에서 사용하기 위해 스토어를 내보냅니다.

컴포넌트에서 Vuex 사용

이제 Vuex 스토어를 만들었으므로 이를 컴포넌트에서 사용하겠습니다. Counter 구성 요소에서 count 및 increment 변형을 사용하겠습니다.

rrreee

여기에서는 먼저 계산된 속성 count를 사용하여 store.state.count의 현재 값을 가져온 다음 버튼에 클릭 이벤트를 추가하고 증가변이. 🎜🎜이제 애플리케이션에서 Counter 구성 요소를 사용할 수 있으며 Vuex 스토어에 자동으로 연결됩니다. 🎜🎜비동기 작업🎜🎜때로는 Vuex 저장소에서 HTTP 요청 전송과 같은 비동기 작업을 수행해야 할 때가 있습니다. 이 경우 샘플 코드에서 actions 옵션을 사용할 수 있습니다. 🎜rrreee🎜여기서 먼저 setTodos라는 돌연변이를 정의하고 수신 todos 매개변수를 state.todos로 설정합니다. 그런 다음 actions 옵션을 사용하여 fetchTodos라는 작업을 정의합니다. 이 작업은 비동기 작업을 트리거하여 할 일 데이터를 가져오고 완료 시 commit를 호출합니다. code>를 사용하여 setTodos변이를 트리거합니다. 🎜🎜플러그인 사용🎜🎜플러그인을 사용하여 Vuex 스토어의 기능을 확장할 수 있습니다. 예를 들어 vuex-persistedstate 플러그인을 사용하면 페이지를 새로 고칠 때마다 저장소 상태가 재설정되지 않도록 Vuex 저장소를 영구적으로 만들 수 있습니다. 🎜🎜먼저 플러그인을 설치해야 합니다: 🎜rrreee🎜 그런 다음 스토어에 플러그인을 추가할 수 있습니다: 🎜rrreee🎜여기서 vuex-persistedstate에서 createPersistedState를 가져왔습니다. > 기능을 추가한 다음 스토어에 플러그인으로 추가하세요. 🎜🎜Summary🎜🎜이 기사에서는 VUE3에서 Vuex 상태 관리를 사용하는 방법을 배웠습니다. Vuex 스토어를 생성하는 방법, 컴포넌트에서 Vuex를 사용하는 방법, Vuex에서 비동기 작업을 수행하는 방법, 플러그인을 사용하여 Vuex의 기능을 확장하는 방법을 배웠습니다. 🎜🎜Vuex를 사용하면 애플리케이션 상태를 더 잘 관리하고, 애플리케이션을 더 쉽게 유지 관리할 수 있으며, 향후 확장을 위한 더 나은 기반을 제공할 수 있습니다. 🎜

위 내용은 VUE3 개발 시작하기: Vuex State Management 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!