vuex状态管理几种状态,vue如何实现状态管理
Vuex是专门为Vue.js应用开发的状态管理模式。本文将与大家分享在Vue3.0中快速入门Vuex状态管理的方法，本文通过一个示例代码详细讲解，对大家学习Vuex状态管理有很大的帮助。有兴趣的朋友可以一起学习。
Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随相应的规则变化。Vuex还集成在Vue的官方调试工具devtools中，提供了零配置的穿越调试、状态快照的导入导出等高级调试功能。
如果你不打算开发大型的单页面应用，使用Vuex可能会很繁琐和多余。确实如此。——如果你的应用足够简单，最好不要用Vuex。简单的商店模式对你来说就足够了。但是，如果你需要构建一个中型或者大型的单页面应用，你很可能会考虑如何更好地管理组件之外的状态，Vuex就成为了一个自然的选择。
一、State
由于Vuex的状态存储是响应性的，从store实例读取状态的最简单方法是在计算属性中返回某个状态：
从“vue”导入{ computed }
从“vuex”导入{ useStore }
导出默认值{
setup () {
const store=useStore()
返回{
count:computed(()=store . state . count)
}
}
}
二、Getters
Vuex允许我们在商店中定义“getter”(可以认为是商店的计算属性)。就像计算属性一样，getter的返回值会根据其依赖关系进行缓存，只有当其依赖关系值发生变化时才会重新计算。
从“vue”导入{ computed }
从“vuex”导入{ useStore }
导出默认值{
setup () {
const store=useStore()
返回{
double:computed(()=store . getters . double)
}
}
}
三、Mutations
改变Vuex商店状态的唯一方法是提交一个突变。Vuex中的突变与事件非常相似：每个突变都有一个字符串和回调函数(处理程序)的事件类型。这个回调函数是我们实际改变状态的地方，它将接受state作为第一个参数：
const store=createStore({
状态：{
计数：1
},
突变：{
增量(状态){
状态.计数
}
}
})
您不能直接调用变异处理程序。这个选项更像是事件注册：“当类型增量的突变被触发时，这个函数被调用。”要唤醒突变处理程序，您需要调用相应类型的store.commit方法：
store.commit(“增量”)
四、Actions
动作类似于突变，除了：
动作提交突变而不是直接改变状态。
动作可以包含任何异步操作。
const store=new Vuex。商店({
状态：{
计数：0
},
突变：{
增量(状态){
状态.计数
}
},
动作：{
增量(上下文){
context . commit(“increment”)
}
}
})
由store.dispatch方法触发：
store.dispatch(增量)
五、Modules
由于使用了单个状态树，应用程序的所有状态都将集中在一个相对较大的对象中。当应用程序变得非常复杂时，store对象可能会变得非常臃肿。
为了解决上述问题，Vuex允许我们将商店分成模块。每个模块都有自己的状态、变异、动作、获取器，甚至嵌套的子模块3354，从上到下以同样的方式划分：
常数模块A={
状态：()=({.}),
突变：{.},
动作：{.},
getters: {.}
}
常数模块B={
状态：()=({.}),
突变：{.},
动作：{.}
}
const store=createStore({
模块：{
答：模块a，
b:模块b
}
})
六、vuex-persistedstate
当页面被刷新，项目被重新加载时，vuex将被重置，所有状态将返回到初始状态。使用vuex-persistedstate可以避免这种情况。
1.装置
npm安装-保存vuex-持久状态
2.使用
从“Vuex”导入Vuex；
从“vuex-persistedstate”导入createPersistedState
const store=new Vuex。商店({
插件：[createPersistedState()]，
});
以上是Vue3.0中如何快速上手Vuex状态管理的详细内容，更多关于Vuex状态管理的信息请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。