简化vuex国家管理方案的方法

在vuejs相关项目的开发过程中，我们经常使用vuex作为状态管理工具，将整个组件的状态作为单向数据流的模式管理。

实际上，vuex在实际使用中可以说是相当繁琐的，每次需求增加，都需要增加突变类型、动作和变体。为了简化这一操作，我们可以将变化和操作结合起来，简化流程，如下所示：

在这种思想的指导下，muse-model诞生了，它以一种简单而优雅的方式完成了整个项目的状态管理。

什么是缪斯模型

Muse-model并不是一个全新的状态管理工具。它是基于vuex开发的，可以说是vuex的辅助工具。在使用muse-model的过程中，可以使用vuex的所有API，方便vuex的用户过目。初始化muse-model时，还需要传入存储对象。

//来自“Vue”的model.jsimport Vue从“Vuex”导入Vuex；从“muse-model”导入MuseModelexport const store=Vuex。store({ strict : true })；导出默认的新MuseModel(商店)；使用

我们将以计数器为例演示缪斯模型的使用。

定义模型

该模型由名称空间、状态和动作组成

//count.jsexport默认值{ namespace: 'demo '，state: { count: 1 }，add(){ return { count : this . state . count 1 } }，Sub () {return {count : this。国家。count-1}}不要直接在操作中更改状态，而是通过return返回需要更改的新状态。

连接组件

模型可以通过连接方法混合到组件的计算方法和方法中。

template div[email protected]=' add '/button { { count } }[email protected]=' sub '-/button/div/template script import model from '。/model '；从“”导入CountModel。/count '；const COuntui={ name : ' count-ui ' }；导出默认模型. connect(CountUI，count model)；/脚本异步处理

对于异步处理，您只需要返回一个promise对象。

Exportdefault {//.addtime out(){//异步处理returnnewpromise ((resolve，reject)={ settimeout()={ resolve({ count : this . state . count 1 })；}, 1000);});}}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。