Vue3中Vuex状态管理学习实战示例详解
短信预约 -IT技能 免费直播动态提醒
引言
Vuex 是 Vue 全家桶重要组成之一，专为 Vue.js 应用程序开发的 状态管理模式 + 库 ，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
一、目录结构
demo/
package.json
vite.config.js
index.html
public/
class="lazy" data-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.配置class="lazy" data-src/store/index.js文件。
// class="lazy" data-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.配置class="lazy" data-src/store/modules/user.js文件。
// class="lazy" data-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: '/file/upload/202211/13/bjhsgo4bxcn.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.在class="lazy" data-src/main.js入口文件中注册使用Vuex。
// class="lazy" data-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中的使用。
// class="lazy" data-src/views/index.vue
<template>
<div>
<van-image
round
lazy-load
width="200"
height="200"
:class="lazy" data-src="img">
<template #loading>
<van-loading type="spinner" size="30" />
</template>
</van-image>
<br>
<van-button type="primary"
icon="search"
zise="mini"
text="随机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 () => {
loading.value = true
await dispatch('User/setRandomImg')
loading.value = false
}
return {
img,
loading,
getImg,
}
},
}
</script>
提示： 为了访问 state 和 getter，需要创建 computed 引用以保留响应性，这与在 Options API 中创建计算属性等效。
以上就是Vue3中Vuex状态管理学习实战示例详解的详细内容，更多关于Vue3 Vuex状态管理的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
