vue和vuex的使用方法,vuex 3
在Vue3.x中，可以直接用vue2.x的方法在html代码中检索Vuex的值，但是和js中的vue2.x差别太大了。下面这篇文章主要介绍vuex在vue3中详细使用的相关信息，有需要的可以参考一下。
目录
Vuex是做什么的？什么是国家管理？单页状态管理vuex(vue 3.2 3.2版)多页状态管理vuex store对象属性Vue3 1中获取store实例对象的方法介绍。状态2。突变3。行动4。吸气器5。模块摘要
Vuex是做什么的？
Vue官方：状态管理工具
状态管理是什么？
需要在多个组件之间共享的状态是反应性的，一个变更，所有变更。
比如一些全球通用的状态信息：用户登录状态、用户名、地理位置信息、购物车中的商品等等。
这个时候我们就需要这样一个全局状态管理的工具，Vuex就是这样一个工具。
单页面的状态管理
视图-操作-状态
视图触发动作，改变状态，并响应视图层。
vuex（Vue3.2版本）
Store/index.js创建一个商店对象并导出商店
从“vuex”导入{ createStore }
导出默认的createStore({
状态：{
},
突变：{
},
动作：{
},
模块：{
}
})
Main.js的介绍和使用
.
从导入存储。/商店
.
app.use(商店)
多页状态管理
vuex store对象属性介绍
Vue3中获取 store 实例对象的方法
在vue2中，你可以通过这个获得商店的实例对象。$store.xxx
vue3中的Setup在beforecreate和created之前执行。此时vue对象还没有创建，也没有之前的this，所以这里我们需要用另一种方法来获取store对象。
从“vuex”/导入{ useStore }/引入use store方法
Const store=useStore() //此方法用于返回存储实例
Console.log(store) //存储实例对象
1. state
存储数据的位置。
状态：{
数数：100，
数字：10
},
用法：使用方法与vue2.x中的版本大致相同，状态中的属性由$ store.state .属性名获取。
//模板
span { { $ store . state . count } }/span
span{{$store.state.num}}/span
可以直接更改状态中的数据，但是Vue不建议。因为对于vue开发工具devtools来说，数据更改是直接在state中进行的，devtools无法跟踪。在vuex中，希望可以通过动作(异步操作)或者突变(同步操作)来改变数据，这样就可以在devtools中直接观察到数据的变化和记录，方便开发者调试。
此外，在vue3中为state中的对象添加或删除属性时，不再需要使用vue.set()或vue.delete()以响应的方式处理对象，对象直接添加的属性已经有了响应的方式。
2. mutations
更新vuex商店状态的唯一方法是提交突变。
同步可以直接在变异中执行。
MU主要由两部分组成：
字符串的事件类型是* *回调函数(handler)**这个回调函数的第一个参数是statemutations: {
//传入状态
增量(状态){
状态.计数
}
}
模板由$store.commit(方法名)触发。
如果需要在vue3.x中获取** store的实例，需要调用类似useStore **的函数，在vuex中导入。
//导入useStore函数
从“vuex”导入{ useStore }
const store=useStore()
store.commit(“增量”)
mution 的参数与传参方法
Mution接收可以直接写入已定义方法的参数，以接受传递的参数。
//.状态定义计数
突变：{
sum(状态，数字){
state.count=数字
}
}
通过提交的负载传递参数。
使用store.commit(mution中的mution名称，要传递的参数)在commit to deliver中添加参数。
h2 { {这个。$store.state.count}}/h2
按钮@click=添加(10)/按钮
.
脚本设置
//获取存储实例。请参见上面获取store实例的方法。
const add=(num)={
store.commit(sum ，num)
}
/脚本
mution 的提交风格
如前所述，mution主要包括两部分：类型和回调函数，参数通过commit payload的方式传递(提交)。现在我们可以了
这样，mution就提交了。
const add=(num)={
store.commit({
Type: sum ，//type是在mution中定义的方法名。
数字
})
}
.
突变：{
总和(状态，有效负载){
state . count=load . num
}
}
3. actions
异步操作在动作中进行，然后传递给变异。
动作的基本用法如下：
action中定义的方法的默认参数是** context * *，可以理解为store对象。
通过context对象获取存储，通过commit触发mution中的方法完成异步操作。
.
突变：{
sum(状态，数字){
state.count=数字
}
},
动作：{
//context上下文对象，可以理解为存储
sum_actions(上下文，数字){
setTimeout(()={
Context.commit(sum ，num) //通过上下文触发分段求和
}, 1000)
}
},
通过模板中的dispatch调用action中定义的sum_action方法。
//.模板
store.dispatch(sum_actions ，num)
通过承诺实现异步操作的完成，并通知组件异步执行的成功或失败。
//.
const addAction=(num)={
store.dispatch(sum_actions ，{
数字
}).然后((res)={
console.log(res)
}).catch((err)={
console.log(错误)
})
}
sun_action方法返回一个承诺。当累计值大于30时，将不累计，并抛出错误。
动作：{
sum_actions(上下文，有效负载){
返回新承诺((解决，拒绝)={
setTimeout(()={
//通过上下文对象获取计数
if (context.state.count 30) {
context.commit(sum ，payload.num)
解决(“异步操作成功执行”)
}否则{
拒绝(新错误(异步操作执行错误))
}
}, 1000)
})
}
},
4. getters
类似于组件的计算属性
从“vuex”导入{ createStore }
导出默认的createStore({
状态：{
学生：[{姓名： mjy ，年龄： 18}，{姓名： cjy ，年龄： 22}，{姓名： ajy ，年龄： 21}]
},
getters: {
more 20 stu(state){ return state . students . filter(item=item . age=20)}
}
})
用方法名$ store.getters调用。
//.模板
H2 { { $ store . getters . more 20 stu } }/H2//显示20岁以下的学生
getters的参数，getters可以接收两个参数，一个是state，一个是自己的getters，调用自己已有的方法。
getters: {
more20stu (state，getters){ return getters . more 20 stu . length }
}
getters 的参数与传参方法
以上是getters的两个固定参数。如果您想将参数传递给getters以过滤年龄超过的人，您可以这样做。
返回接受年龄并对其进行处理的函数。
getters: {
more20stu (state，getters){ return getters . more 20 stu . length }，
moreAgestu(州){
返回函数(年龄){
返回state.students.filter(item=
item.age=年龄
)
}
}
//这个写法和上面的写法一样但是更简洁。使用es6中的箭头功能。想知道ES6箭头函数的写法，
//可以看看这篇文章，https://blog.csdn.net/qq_45934504/article/details/123405813? SPM=1001 . 2014 . 3001 . 5501
moreAgestu_Es6: state={
返回年龄={
返回state . students . filter(item=item . Age=Age)
}
}
}
使用
//.模板
H2 { { $ store . getters . more 20 stu } }/H2//显示20岁以下的学生
H2 { { $ store . getters . moregastu(18)} }/H2//18岁以下的学生通过参数传递显示。
5. modules
当应用变得复杂时，状态中管理的变量变得越来越多，存储对象可能会变得相当臃肿。
为了解决这个问题，vuex允许我们将存储划分为模块，每个模块都有自己的状态、变异、动作、getters等。
在存储文件中创建新的模块文件夹。
在模块中，您可以创建单个模块，一个模块处理一个模块的功能。
Store/modules/user.js处理用户相关的函数。
Store/modules/pay.js处理与支付相关的功能。
Store/modules/cat.js处理与购物车相关的功能。
//user.js模块
//导出
导出默认值{
Namespace: true，//为每个模块添加一个前缀名，以确保模块名不冲突。
状态：()={}，
突变：{}，
动作：{}
}
最后在store/index.js中介绍
//store/索引. js
从“vuex”导入{ createStore }
从导入用户。/modules/user.js
从导入用户。/modules/pay.js
从导入用户。/modules/cat.js
导出默认的createStore({
模块：{
用户，
支付，
猫
}
})
模板中，module的写法和没有module差不多，只带module的名字。
H2 { { $ store . state . user . count } }/H2
Store.commit(user/sum ，num) //带模块名的参数
store.dispatch(用户/总和_操作，总和)
总结
关于Vuex在Vue3中的详细使用，本文就到这里了。更多关于Vuex在Vue3中使用的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。