引言
Vuex 是 Vue 全家桶重要组成之一，专为 Vue.js 应用程序开发的 状态管理模式 + 库 ，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
一、目录结构
demo/
package.json
vite.config.js
index.html
public/
src/
api/
assets/
common/
components/
store/
index.js
modules/
user.js
common.js
views/
index.vue
App.vue
main.js
二、版本依赖
vite: ^2.0.0
vue: ^3.2.8
vuex: ^4.0.0
三、配置Vuex
为了避免所有状态集中到一个对象或一个文件而变得臃肿，所有会按照不同的产品或业务线将状态树切割成多个 模块 （module），并配置各自的 命名空间 （namespaced），防止状态重复冲突。
- 3-1.配置src/store/index.js文件。
// src/store/index.js
import Vuex from 'vuex'
import User from './modules/user'
import Common from './modules/common'
export default new Vuex.Store({
modules: {
User,
Common,
}
})
- 3-2.配置src/store/modules/user.js文件。
// src/store/modules/user.js
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: 'https://images.dog.ceo/breeds/bulldog-french/n02108915_8258.jpg',
},
getters: {
getUsername (state) {
return state.username
},
getRandomImg (state) {
return state.randomImg
},
},
mutations: {
[SET_USER_NAME]: (state, username)=>{
state.username = username
},
[SET_RANDOM_IMG]: (state, randomImg)=>{
state.randomImg = randomImg
},
},
actions: {
async setUsername ({dispatch, commit, getters}, data) {
let username = getters.getUsername
return new Promise((resolve, reject) => {
setTimeout(()=>{
commit('GET_USER_NAME', data)
resolve(data)
}, 2000)
})
},
async setRandomImg ({dispatch, commit, getters}, data) {
// let randomImg = getters.getRandomImg
return new Promise((resolve, reject) => {
axios.get('https://dog.ceo/api/breeds/image/random').then((res) => {
let img = res.data.message
commit('SET_RANDOM_IMG', img)
resolve(img)
})
})
},
},
}
- 3-3.在src/main.js入口文件中注册使用Vuex。
// src/main.js
import { createApp } from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
// ...
const app = createApp(App)
app.use(router).use(store);
app.mount('#app')
四、使用Vuex
- 这里主要介绍一下在Vue3的Composition API中的使用。
// src/views/index.vue
提示： 为了访问 state 和 getter，需要创建 computed 引用以保留响应性，这与在 Options API 中创建计算属性等效。
以上就是Vue3中Vuex状态管理学习实战示例详解的详细内容，更多关于Vue3 Vuex状态管理的资料请关注脚本之家其它相关文章！