close

in State 으로 관리- 포괄적인 가이드 및 실제 사례 Vuex Vue.js

Vuex state 애플리케이션 용 관리 라이브러리 로, 애플리케이션의 Vue.js 여러 s에서 데이터를 관리하고 동기화할 수 있습니다. Flux 아키텍처를 구현하여 애플리케이션을 쉽고 효율적으로 관리할 수 있습니다. component Vuex state

 

Vuex 포함 된 주요 개념

1. State

state in은 애플리케이션 Vuex 의 중앙 집중식 데이터 저장소를 나타냅니다. 서로 다른 사이에서 공유해야 하는 응용 프로그램의 데이터를 보유합니다 component. state 다음은 in 을 정의하는 예입니다 Vuex.

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations state in 수정을 담당합니다 Vuex. 현재 state 및 페이로드를 인수로 사용하는 동기 함수입니다. 다음은 다음에서 돌연변이를 정의하는 예입니다 Vuex.

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

 

삼. Actions

Actions mutations 비동기 작업 을 처리하고 state. 여기에는 API 호출, 비동기 작업 또는 복잡한 논리가 포함될 수 있습니다. 다음은 작업을 정의하는 예입니다 Vuex.

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters state 저장소 에서 파생된 검색 및 계산을 허용합니다 Vuex. 데이터를 s 로 반환하기 전에 데이터에 액세스하고 조작하는 데 유용합니다 component. 다음은 getter를 정의하는 예입니다 Vuex.

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

Vuex 프로젝트 에 설치하려면 Vue.js 다음 단계를 따르십시오.

1단계: Vuex npm 또는 yarn을 통해 설치:

npm install vuex

또는 

yarn add vuex

2단계: store.js  프로젝트의 루트 디렉터리에 파일을 만듭니다. 여기에서 애플리케이션을 선언하고 관리합니다 state.

3단계: store.js  파일 에서 Vuex 새 저장소 개체를 가져오고 만듭니다.

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

4단계: 파일 에서 main.js  스토어를 가져와 Vue 애플리케이션에 연결합니다.

import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');

5단계: Vuex 이제 프로젝트에 설치하고 설정했습니다. state s, getters, mutations 및 파일 actions 에서 선언하고 store.js Vue s에서 사용할 수 있습니다 component.

예:

파일 에서 다음과 같이 store.js  간단하고 변형을 선언할 수 있습니다. state 

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

Vue에서  and 함수를 사용하여 and mutation을 component 사용할 수 있습니다  . state mapState mapMutations 

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

이러한 단계를 통해 성공적으로 설치되었으며 이를 사용하여 애플리케이션 Vuex 을 관리할 수 있습니다. state Vue.js

 

를 사용하면 Vuex 애플리케이션을 쉽고 일관되게 관리할 수 있습니다 state. 데이터 관리에 대한 구조화된 접근 방식을 제공하면서 코드 유지 관리 및 재사용 가능성을 향상시킵니다.