详细讲解vue中的状态管理Vuex

Vuex是专门为vue.js设计的状态管理模式，也可以用devtools进行调试。

在vuex出现之前，VUEX中的状态属于“单向数据流”。举个官网：的例子

newvue({//state data(){ return { count : 0 } }，//view template 3360 ` div { { count } }/div `，//action methods : { increment(){ this。计数}}})

状态是一个数据源。视图以声明的方式将状态映射到视图。操作响应视图上用户输入引起的状态变化

但是它不能解决多个组件的共享状态

于是vuex应运而生

简单来说，共享状态存储在状态中，状态由变量操作，但是store.commit需要主动操作变量。

让我们分别介绍状态、获取器、变体、动作和模块

状态

单一状态树

Vuex使用单个状态树，因此一个对象可以包含所有应用程序级别的状态。所以状态就是数据源。

如何在组件中获取vuex状态？

因为vuex的状态存储是响应性的，所以从存储实例中读取状态的最简单方法是使用计算属性返回某个状态：

这是在store/state.js中声明的数据源

这是组件中的引用

但是，需要注意的是，在组件中引用之前，需要将其注入到条目文件中，即：

如果存储选项没有在根实例中注册，则需要在使用状态的每个组件中导入它。

注册后，子组件只需要这个。$store呼叫vuex。

吸气剂

有时我们需要从状态中导出一些状态，例如过滤一组列表，而这些过滤后的数据被其他组件使用。然后我们需要打包这个结果，形成一个共享状态。

例如：

computed : { donetoscout(){返回此。$ store . state . todos . filter(todo=todo . done)。length}}如果这个长度被其他组件使用，我们该怎么办？

吸气剂应运而生。

getter s : { donetocount 3360 state={ return state . todos . filter(todo=todo . done))。length } } getters作为store.getters对象公开

因此，在任何组件中使用它都很容易：

computed : { donedoscount(){返回此。$ store.getters.donedoscount}}这是getters.js

这是组件中的引用

突变

改变Vuex商店状态的唯一方法是提交更改。

Vuex中的突变就像一个事件：每个突变都有一个事件类型的字符串和一个回调函数。这个回调函数接受状态作为第一个参数。

但是我们不能直接调用突变处理器。要唤醒突变处理程序，需要调用相应类型的store.commit方法。

这是在突变. js中注册的一些事件

这在触发此事件的组件中

当然，我们注意到额外的参数可以在变量中传递，这个参数被称为变量的负载。在更多情况下，负载应该是一个对象。这可以包括更多的字段。

但是突变必须是同步功能。

那么我们如何异步更新状态呢？

答案是：行动

行动

动作类似于突变，除了：

突变提交改变，而不是直接改变状态。操作可以包含任何异步操作。这也形成了动作——突变——状态的过程

Actions函数接受与存储实例具有相同方法和属性的上下文对象，因此您可以通过context.commit提交一个突变.但是怎么触发呢？

回答：存储。调度

模块

使用单个状态树，应用程序的所有状态都集中在一个大对象中。因此，商店对象往往会变得臃肿。

为了解决这个问题，Vuex允许我们将商店分成不同的模块。每个模块都有自己的存储、突变、动作和获取器。

项目结构

index.htmlAPI.#提取API请求 组件。根级动作 突变. js #根级突变 模块购物车模块产品. js #产品模块总结：

Vuex可用于在单个页面上的组件之间共享状态。不适合跨页交流。

此外，对于一些跨页数据或关键数据，可以使用localStorage、sessionStorage

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。