vuex状态管理几种状态,不用vuex怎么实现状态管理
本文主要介绍Vuex状态管理器的使用。本文通过示例代码为您做了非常详细的介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
一、Vuex是什么？二。何时使用vuex III。vuex IV的核心概念和API。应用实例五、Vuex中各种辅助功能的使用可以让我们更方便的使用Vuex。
一、Vuex是什么？
Vuex在Vue项目开发时使用的状态管理工具。简单来说，就是对Vue的应用中多个组件的共享状态进行集中式的管理（读/写）
Vuex实现了单向数据流，并有一个全局存储数据的状态。当一个组件想要改变状态中的数据时，它必须通过突变来实现。Mutation还为外部插件提供了订阅者模式，以便调用来获取状态数据的更新。
但是当所有异步操作(俗称后台接口异步获取更新数据)或者批量同步操作都需要采取Action，而Action又不能直接修改状态时，还是需要通过变异来修改状态数据。最后根据状态的变化，渲染到视图中。
二、什么时候使用Vuex
不适用场景：小而简单的应用，Vuex繁琐冗余，更适合使用简单存储模式。
适用场景：构建一个中大型单页面应用，你可能会考虑如何更好地管理组件外的状态，即多个组件共享状态：
多个视图依赖于同一状态：此时对于多层嵌套组件来说，传递参数的方法会非常繁琐，对于兄弟组件之间的状态转移也无能为力。
来自不同视图的行为需要变更同一状态：此时，使用父子组件通过事件直接引用或更改和同步状态的多个副本，通常会导致代码不可维护。
在这些情况下，Vuex适合全局单例模式管理。
三、Vuex的核心概念和API
流程：View - Actions - Mutations - State - View
1、state
1)由vuex管理的状态对象
2)应该是独一无二的。
常量状态={
xxx: initValue
}
2、 mutations
1)包含直接更新状态的多个方法(回调函数)的对象。
2)谁将触发它：在动作中提交(“突变名称”)或在组件中通过this.$store.commit(‘xxx’,params)使用它。类似于该组件中的自定义事件
3)只能包含同步代码，不能写异步代码。
常量突变={
xxx(state，{data1}) {
//更新状态的属性
}
}
3、 actions
1)提交变异，异步操作。包含多个事件回调函数的。
2) Execute: commit()触发变异的调用，间接更新状态。
3)谁将触发：组件中的this.$store.dispatch(action 名称, data1)
4)它可以包含异步代码(axios)
常量操作={
zzz ({commit，state}，data1){
提交( xxx ，{data1})
}
}
4、 getters
1)数据采集前重新编译可以理解为状态的计算属性。
2)谁将阅读它：在组件中：this.$store.getters.xxx
const getters={
xxx(州){
返回.
}
}
5、 modules
1)包含多个module:store的子模块，用于开发大型项目，方便状态管理，也就是把store分成模块，这样store对象就不会太臃肿。
2)模块是商店的配置对象。
3)对应一个组件(包括共享数据)
四、应用举例
1、安装：npm i vuex -S
2、创建store：src/store/index.js
从“vuex”导入{ createStore }；
导出默认的createStore({
//vuex中的数据源，我们需要保存的数据就保存在这里。你可以通过这个在组件中得到我们定义的数据。$ store.state
状态：{
计数：0，
年龄：0岁
},
/*
(1)getter相当于vue中的computed属性，getter的返回值会根据其依赖关系进行缓存，只有当其依赖值发生变化时才会重新计算。
(2)通过属性访问Getter会暴露为store.getters对象，这些值可以作为属性访问：这个。$store.getters.xxx
(3)Getters可用于监控状态中值的变化，并返回计算结果。
*/
getters: {
获取(状态){
返回state.age=25
}
},
/*
改变Vuex的商店中的状态的唯一方法是提交一个突变，并且该突变必须是同步功能。
在sotre.js中定义突变对象，该对象中有两个方法，突变里面的参数，第一个默认为状态，
其中第二个参数目标文件在官方文档就是载荷（有效载荷),可以传入参数及对象。
在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的变化会更易读
*/
突变：{
addCount(state，obj){
返回状态。计数=对象。数量
},
subCount(state，obj){
返回状态。计数-=对象编号
}
},
动作：{
addCountAsyn(上下文){
setTimeout(()={
context.commit(addCount ，{
数字：1
})
},3000)
},
子突触素(上下文){
setTimeout(()={
context.commit(subCount ，{
数字：1
})
},2000)
}
}
})
3、在main.js文件中使用store
4、创建Home.vue组件
模板
差异
氘通过吸气剂获得计算后的年龄：{{ getterAge }}/h2
pCount:{{ count }}/p
button @click=handlerAdd()加1/按钮
button @click=handlerSub()减1/按钮
button @click=handlerAddAnys()异步增加(2s后执行)/按钮
button @click=handlerSubAnys()异步减少(2s后执行)/按钮
/div
/模板
脚本
导出默认值{
姓名：家，
计算值：{
计数(){
归还这个store.state.count
},
getterAge(){
归还这个store.getters.getterAge
}
},
方法：{
handlerAdd(){
这个store.commit(addCount ，{
数字：1
})
},
handlerSub(){
这个store.commit(subCount ，{
数字：1
})
},
handlerAddAnys(){
这个store.dispatch(addCountAsyn )
},
handlerSubAnys(){
这个100美元商店。分派( subcountsyn )
}
}
}
/脚本
6、在App.vue中导入Home.vue
7、运行效果：
五、vuex中各种辅助函数的用法，可以使我们更加方便的运用vuex
1、…mapState
计数(){
归还这个store.state.count
},
等价于
.mapState([
"计数"
]),
2、…mapGetters
getterAge(){
归还这个store.getters.getterAge
}
等价于
.mapGetters([getterAge])
3、…mapMutations：使用辅助函数后载荷的传参，直接在调用的地方进行传参便可
handlerAdd(){
这个store.commit(addCount ，{
数字：1
})
},
handlerSub(){
这个store.commit(subCount ，{
数字：1
})
},
等价于
.地图突变({
handlerAdd: addCount ，
处理器子：“子计数”
})
4、…mapActions
handlerAddAnys(){
这个store.dispatch(addCountAsyn )
},
handlerSubAnys(){
这个100美元商店。分派( subcountsyn )
}
等价于
.地图操作({
handler danys:“addCountAsyn”，
handlerSubAnys:"subcountsyn "
})
修改上例中的Home.vue组件
到此这篇关于Vuex -状态管理器的使用的文章就介绍到这了，更多相关状态管理状态管理器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。