Vuex描述：

Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中式存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随着相应的规则而变化。

内容包括：

状态：驱动应用程序的数据源；View:将状态映射到生活方式中的视图；动作：响应由视图上的用户输入引起的状态变化；示意流程图

然而，当我们的应用程序遇到多个组件的共享状态时，单向数据流的简单性很容易被破坏：

多个视图依赖于同一个状态。

不同观点的行为需要改变相同的状态。

至于第一个问题，对于多层嵌套组件来说，传递参数的方法会非常繁琐，对于兄弟组件之间的状态传递也无能为力。

对于第二个问题，我们经常使用父子组件通过事件直接引用或更改和同步状态的多个副本。这些模式非常脆弱，经常导致代码无法维护。

因此，我们为什么不提取组件的共享状态，并以全局单一模式来管理它们呢？在这种模式下，我们的组件树形成了一个巨大的“视图”，无论在树的哪个位置，任何组件都可以获得状态或触发行为！

此外，通过定义和隔离状态管理中的各种概念并实施某些规则，我们的代码将变得更加结构化和易于维护。

适合单页应用

安装vuex

Npm i vuex创建一个新的文件夹存储，并建议一个目录

行动和突变

突变：(必须是同步函数)

更改存储中状态值的唯一方法是提交突变，每个突变都有一个字符串事件类型和一个回调函数。这个回调函数是我们实际进行状态更改的地方，它将接受状态作为第一个参数：

突变： { addnum(state){ state . num } }您可以传递一个额外的参数来store.commit，即突变的有效载荷：在大多数情况下，有效载荷应该是一个对象，它可以包含多个字段，记录的突变将更容易读取：

突变： {addnum (state，payload){ state . num=payload . amount } }无法直接调用突变处理程序。这个选项更像是事件注册：“当类型增量的突变被触发时，这个函数被调用。”要唤醒突变处理程序，您需要调用相应类型的store.commit方法：

//页面中的操作(1。没有参数)Methods: {Add () {this。$ store.submit ('addnum')}}//2。data(){ argument 3360 { Amount :10 }，Methods: {Add()。

动作类似于突变，除了：

动作提交突变，而不是直接改变状态。操作可以包含任何异步操作。mutations: { addNum(状态，金额){ state.num=金额}，someMutation(状态){ setTimeout(()={ state.count - }，1000) }，Actions : {increment (context，args) {context。commit ('addnum '，args)}}，//编写actions :的另一种方式{increment ({commit}，args) {commit ('addnum '，The args)} }Action函数接受与存储实例具有相同方法和属性的上下文对象，因此可以调用context.commit提交一个突变，或者通过context.state和context.getterss获取状态和getter。

分发操作

//methods : {add () {this。$ store.dispatch ('increment '，这个。pa.amount)}}在页面上，区别是：

动作和突变可以改变状态中数据的状态，但动作可以处理异步函数，在devtool中可以跟踪数据变化，而突变只能处理同步函数，处理异步函数时无法检测到数据变化。

突变处理同步和异步

突变： {//同步addnum(状态，金额){状态。num=amount}，//异步一些突变(状态){settimeout (()={state。count-}，1000)}}页

Templatediv p @click='add '同步{{num}}/p p @click='reduce '异步{ { count } }/p/div/template methods : {//同步add () {this。$ store.commit ('increment '，This.pa.amount) }，//异步reduce () {this。$ store.submit('某些突变')}}在数据更改之前，浏览器会在devtool中显示数据状态

当页面中的数据发生变化时，跟踪数据

操作处理同步和异步

mutations: { addNum(状态，金额){ state.num=amount }，some venture(状态){ state.count - }，actions : { increment({ commit }，Args) {commit ('addnum '，args)}，actosomemulation(context){ settimeout(()={ context.commit(' some venture ')}，1000)}}

方法： {add () {this。$ store.dispatch ('increment '，这个。pa.amount)}，reduce () {this。$ store . dispatch(' actosomemulation ')} }，在数据发生变化之前，它会显示在浏览器中，devtool中的数据也会显示出来。

操作后数据发生变化，

-

总结：变异只能处理同步函数，在devtools中不能检测状态树中的数据变化，而actions可以处理同步和异步数据，在devtools中可以检测数据变化，所以很容易理解

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