Что такое Vuex в Vue.js? Как использовать Вьюкс?
В Vue.js Vuex — это шаблон управления состоянием. Это помогает нам управлять общим состоянием в нашем приложении, делая наш код более удобным в сопровождении и расширяемым. В этой статье мы углубимся в концепцию и использование Vuex, а также предоставим несколько связанных примеров кода.
Что такое Векс?
Vuex — это библиотека управления состоянием, разработанная специально для приложений Vue.js. Проще говоря, он обеспечивает централизованный механизм хранения состояния всех компонентов и предоставляет некоторые инструменты для управления и изменения этих состояний.
Основные концепции Vuex включают в себя:
- state : хранит состояние приложения, доступ к которому можно
this.$store.stateполучить . - getter : используется для получения некоторого состояния из состояния, к которому можно
this.$store.gettersполучить доступ . - мутация : единственный способ изменить состояние, которое можно
this.$store.commitвызвать . - action : аналогично мутации, но может использоваться для обработки асинхронных операций и может
this.$store.dispatchвызываться . - модуль : разделите хранилище на модульную структуру, каждый модуль может иметь свое состояние, геттер, мутацию и действие.
Как использовать Вьюкс?
Ниже приведен простой пример, показывающий, как использовать Vuex с Vue.js.
Установить Вьюекс
Во-первых, нам нужно установить Vuex. Его можно установить через npm:
npm install vuex --save
создать магазин
Далее нам нужно создать магазин. Создайте новое хранилище папок в каталоге src, а затем создайте в этой папке файл с именем index.js, чтобы определить хранилище:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
},
actions: {
increment(context) {
context.commit('increment')
},
decrement(context) {
context.commit('decrement')
}
},
getters: {
getCount: state => state.count
}
})
В приведенном выше коде мы впервые представили Vue и Vuex. Затем мы создаем новый экземпляр Vuex.Store, определяя состояние, мутацию, действие и геттер. Состояние содержит состояние приложения, метод модификации состояния определяется в мутации, асинхронная операция определяется в действии, а состояние, полученное из состояния, определяется в геттере.
вводить магазин
В нашем приложении Vue.js нам нужно внедрить хранилище. Мы можем сделать инъекцию в файле main.js:
import Vue from 'vue'
import App from './App.vue'
import {
store } from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
В приведенном выше коде мы впервые представили компоненты Vue и App. Затем мы импортируем хранилище и внедряем его в экземпляр Vue.
Используйте Vuex
Теперь мы можем использовать Vuex в наших компонентах. В компоненте мы можем this.$store.stateполучить доступ к состоянию через , this.$store.commitк мутации через , к действию this.$store.dispatchчерез и this.$store.gettersк геттеру через .
Вот простой пример компонента:
<template>
<div>
<p>Count: {
{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.getters.getCount
}
},
methods: {
increment() {
this.$store.dispatch('increment')
},
decrement() {
this.$store.dispatch('decrement')
}
}
}
</script>
В приведенном выше коде мы получили this.$store.getters.getCountдоступ и this.$store.dispatch('increment')действию, чтобы реализовать изменение состояния.
Модульный Vuex
Когда приложение становится все более и более сложным, нам может понадобиться разделить хранилище на модульную структуру, каждый модуль может иметь свое состояние, геттер, мутацию и действие.
Вот простой пример, показывающий, как использовать модульность в Vuex:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
},
actions: {
increment(context) {
context.commit('increment')
},
decrement(context) {
context.commit('decrement')
}
},
getters: {
getCount: state => state.count
}
}
const moduleB = {
state: {
message: 'Hello, World!'
},
mutations: {
setMessage(state, message) {
state.message = message
}
},
actions: {
setMessage(context, message) {
context.commit('setMessage', message)
}
},
getters: {
getMessage: state => state.message
}
}
export const store = new Vuex.Store({
modules: {
moduleA,
moduleB
}
})
В приведенном выше коде мы определили два модуля: moduleA и moduleB. Каждый модуль содержит свое состояние, мутацию, действие и геттер. Вставляем оба модуля в магазин.
В компоненте мы this.$store.state.moduleAможем this.$store.state.moduleBполучить доступ к состоянию модуля через или this.$store.commit('moduleA/increment'), this.$store.commit('moduleB/setMessage', message)к мутации модуля через или this.$store.dispatch('moduleA/increment')и this.$store.dispatch('moduleB/setMessage', message)действию модуля через или , чтобы реализовать управление модульностью.
Подведем итог
Vuex — это шаблон управления состоянием, который помогает нам управлять общим состоянием в приложениях Vue.js, делая наш код более удобным в сопровождении и расширяемым. При использовании Vuex нам нужно создать хранилище, внедрить хранилище, использовать Vuex и разделить хранилище на модульную структуру. С помощью Vuex мы можем более удобно управлять состоянием приложения и улучшать ремонтопригодность и масштабируемость кода.