vuex状态管理,vue如何实现状态管理
这篇文章主要为大家介绍了Vue3中状态管理状态管理学习实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
目录
引言一、目录结构二、版本依赖三、配置状态管理四、使用状态管理
引言
状态管理是某视频剪辑软件全家桶重要组成之一，专为vue。j应用程序开发的状态管理模式库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
一、目录结构
演示/
package.json
vite.config.js
index.html
公共/
src/
api/
资产/
普通/
组件/
商店/
索引。射流研究…
模块/
user.js
common.js
观点/
索引。某视频剪辑软件
App.vue
主页。射流研究…
二、版本依赖
维特：^2.0.0
^3.2.8
vuex: ^4.0.0
三、配置Vuex
为了避免所有状态集中到一个对象或一个文件而变得臃肿，所有会按照不同的产品或业务线将状态树切割成多个模块（模块),并配置各自的命名空间（命名空间),防止状态重复冲突。
3-1.配置src/商店/索引。射流研究…文件。src/商店/索引. js
从" vuex "导入状态管理
从导入用户。/模块/用户
从导入公用。/模块/公共
导出默认的新Vuex .商店({
模块：{
用户，
常见的，
}
})
3-2.配置src/商店/模块/用户。射流研究…文件。src/store/模块/用户. js
从" axios "导入爱可信
常量设置用户名=设置用户名
常量集_随机_IMG=集_随机_IMG
导出默认值{
命名空间：对，
状态：{
用户名："汤姆",
随机化：https://张图片。狗。首席执行官/布里迪斯/牛头犬-法国/n 02108915 _ 8258。 jpg ，
},
getters: {
getUsername (state) {
返回状态。用户名
},
getrandommg(州){
返回状态。随机化
},
},
突变：{
[设置用户名]:(状态，用户名)={
状态.用户名=用户名
},
[SET_RANDOM_IMG]:(状态，随机mg)={
状态。随机mg=随机mg
},
},
动作：{
async setUsername ({dispatch，commit，getters}，data) {
让用户名=getters.getUsername
返回新承诺((解决，拒绝)={
setTimeout(()={
提交(获取用户名，数据)
解析（数据)
}, 2000)
})
},
async setrandommg({ dispatch，commit，getters}，data) {
//让randommg=getters。getrandommg
返回新承诺((解决，拒绝)={
axios。得到( https://狗。CEO/API/Bree dies/image/random’).然后((res)={
let img=res.data.message
提交(集合_随机_IMG ，IMG)
解决(img)
})
})
},
},
}
3-3.在src/main。j入口文件中注册使用Vuex。//src/main.js
从“vue”导入{ createApp }
从导入路由器。/路由器
从导入存储。/商店
从导入应用程序 App.vue
//.
const app=createApp(App)
app.use(路由器)。使用（存储);
app。装载(应用数量)
四、使用Vuex
这里主要介绍一下在Vue3的组合应用程序接口中的使用。src/views/index.vue
模板
差异
货车图像
圆形物
惰性负载
宽度=200
高度=200
:src=img
模板#加载
van-loading type= spinner size= 30 /
/模板
/货车图像
英国铁路公司
van-button type="主要"
icon=搜索
zise=mini
text=随机"狗"
:loading=loading
@click=getImg
color=线性渐变（向右，#ff6034，#ee0a24)
正在加载-text=正在加载./
/div
/模板
脚本
从“vue”导入{ ref，计算值}
从" vuex "导入{ useStore }
导出默认值{
setup () {
const { state，getters，commit，dispatch }=useStore()
设img=computed(()=getters[ User/getrandommg ])
让loading=ref(false)
const getImg=async ()={
loading.value=true
等待调度( User/setrandommg )
loading.value=false
}
返回{
img，
正在加载，
getImg，
}
},
}
/脚本
提示：为了访问状态和吸气剂，需要创建计算引用以保留响应性，这与在选项应用程序接口中创建计算属性等效。
以上就是Vue3中状态管理状态管理学习实战示例详解的详细内容，更多关于Vue3 Vuex状态管理的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。