vue3.0使用vuex,vue和vuex的使用方法
状态管理是一个专为vue。j应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，下面这篇文章主要给大家介绍了关于Vue3中状态管理的基本使用方法，需要的朋友可以参考下
目录
一、基本结构二、基本使用三、将商店中的数据模块化后的使用1.模块化2.使用补充：如何改变状态管理中的属性总结
一、基本结构
src/商店/索引。射流研究…中，代码如下
//vue3中创建商店实例对象的方法createStore()按需引入
从" vuex "导入{ createStore }
导出默认的createStore({
状态：{
},
突变：{
},
动作：{
},
getters: {
},
模块：{
}
})
二、基本使用
src/商店/索引。射流研究…
从" vuex "导入{ createStore }
导出默认的createStore({
状态：{
信息："你好"
},
突变：{
//定义突变，用于修改状态（同步)
更新信息(状态，负载){
state.info=有效负载
}
},
动作：{
//定义行动，用于修改状态（异步)
//2秒后更新状态
更新信息(上下文，负载){
setTimeout(()={
context.commit(updateInfo ，有效负载)
}, 2000)
}
},
getters: {
//定义一个吸气剂
formatInfo (state) {
返回state.info Tom
}
},
模块：{
}
})
src/views/Test.vue测试组件中对商店中数据的操作与使用
模板
差异测试组件/div
整点
！-页面中直接使用渲染时与vue2中的使用方法相同-
差异获取商店中的state、getters:{ { $ store。吸气剂。格式信息} }/div
button @click=handleClick 点击/按钮
/模板
脚本
//按需引入使用商店()方法
从" vuex "导入{ useStore }
导出默认值{
名称："测试",
setup () {
//这个10.25 $ store . state . info
//Vue3中商店类似于Vue2中这个100美元商店
//useStore()方法创建商店对象，相当于src/商店/索引。射流研究…中的商店实例对象
const store=useStore()
控制台。日志(存储。状态。信息)//你好
//修改信息的值
const handleClick=()={
//触发突变，用于同步修改状态的信息
//store.commit(updateInfo ，倪好)
//触发行动，用于异步修改状态的信息
store.dispatch(updateInfo ， hi )
}
返回{ handleClick }
}
}
/脚本
点击按钮前
点击按钮后
三、将store中的数据模块化后的使用
1.模块化
基于原索引。射流研究…代码进行改造拆分，假设有两个模块全球的和用户，新建src/store/modules/global.js、src/store/modules/user.js文件
拆分后代码如下(src/store/modules/global.js)
//全局店，存放全局使用共享的数据
导出默认值{ //注意：全局模块中不需要开启命名空间
状态：{
},
突变：{
},
动作：{
},
getters: {
}
}
拆分后代码如下(src/store/modules/user.js)
//用户信息模块（局部模块)
导出默认值{
命名空间：true，//开启命名空间
state () {
返回{
//用户信息对象
个人资料：{
id: ，
头像： ,
昵称：“耶”，
帐户： ,
手机： ,
令牌：""
}
}
},
突变：{
//定义突变，用于同步修改状态
更新昵称(状态，有效负载){
state.profile.nickname=有效负载
}
},
动作：{
//定义行动，用于异步修改状态
//2秒后更新状态
更新昵称(上下文，负载){
setTimeout(()={
context.commit(updateNickname ，有效负载)
}, 2000)
}
},
getters: {
//定义一个吸气剂
格式昵称（州){
返回"嗨"状态。个人资料。昵称
}
}
}
拆分后代码如下(src/store/index.js)
从" vuex "导入{ createStore }
//全局模块
从导入全局。/模块/全局
//局部模块
从导入用户。/模块/用户
导出默认的createStore({
//全局模块
.全球，
//局部模块
模块：{
用户
}
})
2.使用
src/views/Test.vue测试组件中对模块化后的商店中数据的操作与使用
模板
差异测试组件/div
整点
差异获取商店中用户模块的getters:{ { $ store。getters[用户/格式昵称]} }/div
button @click=handleClick 点击/按钮
/模板
脚本
从" vuex "导入{ useStore }
导出默认值{
名称："测试",
setup () {
//这个10.25 $ store . state . info
//Vue3中商店类似于Vue2中这个100美元商店
const store=useStore()
控制台。日志(商店。状态。用户。侧写。昵称)
//修改绰号的值
const handleClick=()={
//触发突变，用于同步修改用户模块状态的信息
//store.commit(updateNickname ， Jackson )
store.dispatch(用户/更新昵称,易)
}
返回{ handleClick }
}
}
/脚本
点击按钮前
点击按钮后
补充：如何改变vuex中的属性
vue3和vue2一样，都是通过提交突变中的方法，进行对状态管理中数据的改变，那具体该如何使用呢？首先看一下突变中的写法
常量突变={
addCount(状态，有效负载){
state.count=有效负载
},
}
导出{突变}
这里，定义了一个addCount方法，这个方法接受两个参数，第一个参数是要改变的状态对象（当然你调用这个放法的传参中也可以写状态.计数然后再突变中直接状态=有效负载就可以了),第二个参数是要改变的数据，比如进行一操作
模板
h1vuex中的数据{{ store.state.count }}/h1
button @click=changeStoreCount 改变状态管理数据/按钮
/模板
脚本语言
从“vue”导入{定义组件}
从" vuex "导入{ useStore }
导出默认定义组件({
名称："索引",
setup() {
const store=useStore()
console.log(存储)
const changeStoreCount=()={
//在这里提交了突变中的addCount方法
store.commit(addCount ，1)
}
返回{ store，changeStoreCount }
},
})
/脚本
样式范围/样式
总结
到此这篇关于Vue3中状态管理的基本使用方法的文章就介绍到这了，更多相关Vue3vuex基本使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。