Что такое Vuex?
Vuex — это библиотека для управления глобальным состоянием приложения, созданная специально для Vue.js. Vuex позволяет централизованно хранить и манипулировать состоянием, делая данные доступными для всех компонентов.
Установка и настройка
Для начала установите Vuex через npm или yarn:
npm install vuex@nextЗатем создайте файл store.js и импортируйте Vuex:
import { createStore } from 'vuex';
const store = createStore({
// ...
});
export default store;Подключите созданный store к вашему основному приложению Vue:
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');Хранилище (Store)
Хранилище состоит из состояния (state), мутаций (mutations), действий (actions) и геттеров (getters).
State
Состояние — это объект, содержащий данные, которые могут быть использованы в компонентах приложения.
const store = createStore({
state() {
return {
counter: 0,
};
},
});Mutations
Мутации используются для синхронного изменения состояния.
const store = createStore({
state() {
return {
counter: 0,
};
},
mutations: {
increment(state) {
state.counter++;
},
},
});Actions
Действия позволяют обрабатывать асинхронные операции и вызывать мутации.
const store = createStore({
state() {
return {
counter: 0,
};
},
mutations: {
increment(state) {
state.counter++;
},
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
},
},
});Getters
Геттеры позволяют получать производные значения на основе состояния.
const store = createStore({
state() {
return {
counter: 0,
};
},
getters: {
doubleCounter(state) {
return state.counter * 2;
},
},
});Интеграция Vuex с компонентами Vue.js 3
После настройки Vuex, давайте рассмотрим, как интегрировать его с компонентами Vue.js 3 и использовать глобальное состояние, мутации, действия и геттеры.
Использование состояния
Для доступа к состоянию хранилища из компонента используйте свойство store.state. Рекомендуется использовать computed свойства для отслеживания изменений состояния.
import { computed } from 'vue';
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const counter = computed(() => store.state.counter);
return {
counter,
};
},
};Использование мутаций
Для вызова мутаций используйте метод store.commit.
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const increment = () => {
store.commit('increment');
};
return {
increment,
};
},
};Использование действий
Для вызова действий используйте метод store.dispatch.
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const incrementAsync = () => {
store.dispatch('incrementAsync');
};
return {
incrementAsync,
};
},
};Использование геттеров
Для доступа к геттерам используйте свойство store.getters. Также рекомендуется использовать computed свойства.
import { computed } from 'vue';
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const doubleCounter = computed(() => store.getters.doubleCounter);
return {
doubleCounter,
};
},
};Использование Vuex в проекте с Vue.js 3 позволяет упростить управление состоянием, делая ваш код более читабельным и удобным для поддержки. Вы можете централизованно хранить и изменять данные, а также использовать их во всех компонентах приложения.