Управление State с помощью Vuex всеобъемлющего Vue.js руководства и реальных примеров

Vuex — это state библиотека управления для Vue.js приложений, позволяющая управлять данными и синхронизировать их между различными component приложениями. Vuex реализует архитектуру Flux, что позволяет легко и эффективно управлять приложением state.

 

Ключевые понятия Vuex включают

1. State

in представляет собой централизованное хранилище данных для вашего приложения state. Vuex Он содержит данные приложения, которые необходимо разделить между различными component s. Вот пример определения state in Vuex:

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

 

2. Mutations

Mutations отвечают за изменение state файла Vuex. Это синхронные функции, которые принимают текущие state и полезные данные в качестве аргументов. Вот пример определения мутации в Vuex:

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

 

3. 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 allow you to retrieve and compute derived state from the Vuex store. They are useful for accessing and manipulating data before returning it to the components. Here's an example of defining a getter in 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;  
    }  
  }  
});

 

To install Vuex in your Vue.js project, you can follow these steps

Step 1: Install Vuex via npm or yarn:

npm install vuex

or

yarn add vuex

Step 2: Create a store.js file in the root directory of your project. This is where we will declare and manage the application state.

Step 3: In the store.js file, import Vuex and create a new store object:

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;

Step 4: In the main.js file, import the store and link it to your Vue application:

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 component s.

Пример:

В store.js  файле вы можете объявить простую state и мутацию следующим образом:

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

В Vue component вы можете использовать state мутацию and с помощью функций  and  : mapState mapMutations

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

С помощью этих шагов вы успешно установили Vuex и можете использовать его для управления state своим Vue.js приложением.

 

С помощью Vuex вы можете легко и последовательно управлять приложением state. Это повышает удобство сопровождения и повторного использования кода, обеспечивая при этом структурированный подход к управлению данными.