What is Vuex in Vue.js? How to use Vuex?
In Vue.js, Vuex is a state management pattern. It helps us manage shared state in our application, making our code more maintainable and extensible. This article will delve into the concept and usage of Vuex, and provide some related code samples.
What is Vuex?
Vuex is a state management library designed specifically for Vue.js applications. In simple terms, it provides a centralized storage mechanism for storing the state of all components, and provides some tools to manage and modify these states.
The core concepts of Vuex include:
- state : Stores the state of the application, which can
this.$store.statebe accessed . - getter : Used to derive some state from state, which can
this.$store.gettersbe accessed . - mutation : the only way to modify the state, which can be
this.$store.commitcalled . - action : similar to mutation, but can be used to handle asynchronous operations, and can
this.$store.dispatchbe called . - module : Divide the store into a modular structure, each module can have its own state, getter, mutation and action.
How to use Vuex?
Below is a simple example showing how to use Vuex with Vue.js.
Install Vuex
First, we need to install Vuex. It can be installed via npm:
npm install vuex --save
create store
Next, we need to create a store. Create a new folder store under the src directory, and then create a file named index.js under this folder to define the store:
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
}
})
In the above code, we first introduced Vue and Vuex. Then, we create a new Vuex.Store instance, defining state, mutation, action and getter. The state contains the state of the application, the method of modifying the state is defined in the mutation, the asynchronous operation is defined in the action, and the state derived from the state is defined in the getter.
inject store
In our Vue.js application, we need to inject the store. We can do the injection in the main.js file:
import Vue from 'vue'
import App from './App.vue'
import {
store } from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
In the above code, we first introduced Vue and App components. Then, we import the store and inject it into the Vue instance.
Use Vuex
Now, we can use Vuex in our components. In a component, we can this.$store.stateaccess state through , this.$store.commitmutation through , action this.$store.dispatchthrough , and this.$store.gettersgetter through .
Here is a simple component example:
<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>
In the above code, we have this.$store.getters.getCountaccessed and this.$store.dispatch('increment')the action through to realize the modification of the state.
Vuex Modular
When the application becomes more and more complex, we may need to split the store into a modular structure, each module can have its own state, getter, mutation and action.
Here is a simple example showing how to use modularity in 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
}
})
In the above code, we defined two modules: moduleA and moduleB. Each module contains its own state, mutation, action and getter. We inject both modules into the store.
In the component, we this.$store.state.moduleAcan this.$store.state.moduleBaccess the state of the module through or this.$store.commit('moduleA/increment'), this.$store.commit('moduleB/setMessage', message)the mutation of the module through or , this.$store.dispatch('moduleA/increment')and this.$store.dispatch('moduleB/setMessage', message)the action of the module through or , so as to realize the management of modularization.
Summarize
Vuex is a state management pattern that helps us manage shared state in Vue.js applications, making our code more maintainable and extensible. When using Vuex, we need to create a store, inject the store, use Vuex, and divide the store into a modular structure. Through Vuex, we can manage the state of the application more conveniently, and improve the maintainability and scalability of the code.