vue状态管理有哪些方法,vue 状态管理干什么的
本文主要介绍了Vue3状态管理使用的详细说明，帮助大家更好的理解和学习使用Vue框架。感兴趣的朋友可以了解一下。
目录
背景
提供/注入
撤销共享状态以提供数据
注入数据
总结
反应的
退出共享状态并使用共享状态。
总结
标签
背景
随着Vue3的逐步应用，对状态管理的需求越来越大。一开始状态管理是基于Vuex4的，但是Vuex4也暴露了一些问题。个人认为Vuex4类似于过渡产品，对TypeScript的支持不完整。如果使用TypeScript编写组件，需要遵循一定的步骤才能正确推断类型，对模块的使用也不友好。Vuex的核心贡献者Kia King也表示，Vuex5已经在计划中，可以提供完整的TypeScript支持。那么在Vuex5出来之前有没有其他的状态管理方案，或者直接‘抛弃’Vuex？
Provide / Inject
提供和注入并不是Vue3的新特性，在Vue2中已经存在。文档中提到的提供和注入绑定没有响应。但是，如果传入一个可监视的对象，其对象的属性仍会响应。
Vue3在Computed和watch的基础上增加了responsive API ref和reactive，可以让provide和inject的应用更加方便。结合Composition API的思想，能否实现简单版本的状态管理？
抽离共享状态
//src/context/calculator.ts
从“vue”导入{ ref，inject，provide，readonly }；
类型计算器={
计数：数字；
增加：()=无效；
update count:(num:number)=void；
};
//提供的密钥，即唯一的令牌
const CalculatorSymbol=Symbol()。
//提供者
导出常数计算器Provide=()={
//数字
const count=ref number(1)；
//增量方法
常数增加=()={
计数.值；
};
//更新方法
const update count=(num:number)={
count.value=num
};
//提供的共享状态对象
const depends={
Count: readonly(count)，//状态为只读，由方法修改。
增加，
更新计数
};
//使用provide api实现状态对象的提供
提供(CalculatorSymbol，depends)；
//返回状态对象，对等体可以调用。
回报看情况；
};
//注入方法
export const calculator inject=()={
//使用注入api注入状态
const calculator context=inject calculator(calculator symbol)；
//错误检查在没有共享的情况下注入
如果(！calculatorContext) {
抛出新错误(“Inject必须在Provide之后使用”)；
}
//返回注入的贡献状态
返回calculatorContext
};
提供数据
与Vuex的全局共享相比，Provide/Inject可以实现全局或局部共享，
全局，可以在main.ts中注入全局状态：
//src/main.ts
从“vue”导入{ createApp，h }；
从“@/App.vue”导入应用程序；
从“@/context/calculator”导入{ calculator provide }；
//创建一个vue实例
const app=createApp({
setup() {
calculator provide()；
return()=h(App)；
}
});
//挂载实例
app . mount( # app )；
如果只想在本地共享，可以将状态注入父组件。
//src/views/parent.vue
从“vue”导入{ define component }；
从“@/context/calculator”导入{ calculator provide }；
导出默认定义组件({
姓名：家长，
setup() {
//共享数据
calculator provide()；
}
});
注入数据
组件可以通过状态注入、使用或修改状态。
//src/views/child.vue
从“vue”导入{ define component }；
从“@/context/calculator”导入{ calculator inject }；
导出默认定义组件({
姓名：孩子，
setup() {
//注入数据
const { count，increase，update count }=calculator inject()；
}
});
小结
实际上，您可以将依赖注入(Provide/Inject)视为“长期道具”，除了：
父组件不需要知道哪些子组件使用它提供的属性。
子组件不需要知道inject的属性来自哪里。
Vue3使得依赖注入的使用更加灵活方便，从而模仿小状态管理。在个人测试中，对TypeScript的支持是比较完整的。
reactive
那么有没有其他不使用Provide/Inject实现状态管理的方法呢？直接编码。
抽离共享状态
//src/context/calculator.ts
类型计算器={
计数：数字；
增加：()=无效；
update count:(num:number)=void；
};
//共享状态
const calculatorStore=reactive calculator({
计数：1，
增加：()={
calculatorStore.count
},
updateCount: (num: number)={
calculatorStore.count=num
}
});
导出{ calculator store }；
使用共享状态
使用状态的方法很简单，只需要导入状态，所有需要使用状态的组件都需要导入。
//src/views/any.vue
从“vue”导入{ define component }；
从“@/context/calculator”导入{ calculator store }；
导出默认定义组件({
名称：任何，
setup() {
console . log(calculator store . count)；
}
});
小结
这个方案其实是利用了reactive的响应性和import的同实例原理，比依赖注入更简单粗糙，也能正确支持TypeScript检查。但是依赖注入可以在不同的根节点共享不同的数据，这种反应式的方案总是共享一个实例，这在一些业务场景中并不适用。
结语
首先，Vuex还是一个比较成熟全面的解决方案，只是对于一些简单的状态管理，你可以尝试用另一种方式来解决；当然，上述方案可能仍有许多不足之处。欢迎各位大神指教~
以上是Vue3状态管理使用详解的详细内容。更多关于Vue3状态管理的使用方法，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。