introduction
Vuex is one of the important components of Vue's family buckets. It is specially developed for applications. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable way with corresponding rules.
1. Directory structure
demo/
public/
src/
api/
assets/
common/
components/
store/
modules/
views/
2. Version dependency
vite: ^2.0.0
vue: ^3.2.8
vuex: ^4.0.0
3. Configure Vuex
In order to avoid all states becoming bloated by concentrating into an object or a file, all state trees will be cut into multiple modules according to different products or business lines, and their respective namespaces will be configured to prevent repeated state conflicts.
- 3-1. Configure src/store/file.
// src/store/
import Vuex from 'vuex'
import User from './modules/user'
import Common from './modules/common'
export default new ({
modules: {
User,
Common,
}
})
- 3-2. Configure the src/store/modules/ file.
// src/store/modules/
import axios from 'axios'
const SET_USER_NAME = 'SET_USER_NAME'
const SET_RANDOM_IMG = 'SET_RANDOM_IMG'
export default {
namespaced: true,
state: {
username: 'Tom',
randomImg: '/breeds/bulldog-french/n02108915_8258.jpg',
},
getters: {
getUsername (state) {
return
},
getRandomImg (state) {
return
},
},
mutations: {
[SET_USER_NAME]: (state, username)=>{
= username
},
[SET_RANDOM_IMG]: (state, randomImg)=>{
= randomImg
},
},
actions: {
async setUsername ({dispatch, commit, getters}, data) {
let username =
return new Promise((resolve, reject) => {
setTimeout(()=>{
commit('GET_USER_NAME', data)
resolve(data)
}, 2000)
})
},
async setRandomImg ({dispatch, commit, getters}, data) {
// let randomImg =
return new Promise((resolve, reject) => {
('/api/breeds/image/random').then((res) => {
let img =
commit('SET_RANDOM_IMG', img)
resolve(img)
})
})
},
},
}
- 3-3. Register Vuex in the src/entry file.
// src/
import { createApp } from 'vue'
import router from './router'
import store from './store'
import App from './'
// ...
const app = createApp(App)
(router).use(store);
('#app')
4. Use Vuex
- Here we mainly introduce the use in Vue3's Composition API.
// src/views/
<template>
<div>
<van-image
round
lazy-load
width="200"
height="200"
:src="img">
<template #loading>
<van-loading type="spinner" size="30" />
</template>
</van-image>
<br>
<van-button type="primary"
icon="search"
zise="mini"
text="Random dog"
:loading="loading"
@click="getImg"
color="linear-gradient(to right, #ff6034, #ee0a24)"
loading-text="loading..." />
</div>
</template>
<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
export default {
setup () {
const { state, getters, commit, dispatch } = useStore()
let img = computed(()=>getters['User/getRandomImg'])
let loading = ref(false)
const getImg = async () => {
= true
await dispatch('User/setRandomImg')
= false
}
return {
img,
loading,
getImg,
}
},
}
</script>
Tip: In order to access state and getters, you need to create a computed reference to preserve responsiveness, which is equivalent to creating computed properties in the Options API.
The above is the detailed explanation of the practical example of Vuex state management learning in Vue3. For more information about Vue3 Vuex state management, please pay attention to my other related articles!