vue店状态管理模式详细介绍

国家管理

1.引入国家管理(vuex)

Uex是专门为vue.js应用开发的状态管理模式。它使用集中式存储来管理应用程序所有组件的状态，并确保状态以可预测的方式根据相应的规则进行更改。Vuex还集成了VUEE的官方调试工具devtools扩展，提供了零配置时间行程调试、状态快照导入导出等高级调试功能。

Vuex的思想

当我们点击页面上的一个按钮时，它会调度动作，动作，然后动作会提交一个突变，这将立即改变状态。状态改变后，我们的页面会从状态中获取数据，页面也会随之改变。Store对象包含我们谈到的一切，动作、状态、突变，所以它是核心

官方演示

Const store=newvuex。存储({state: {count:0}，突变3360 {increment (state) {state。计数}})二。状态管理核心状态管理有五个核心，分别是状态、获取器、突变、动作和模块。

分别简单介绍一下：

1、状态

状态是一个单一的状态树。在State中，我们需要定义数组、对象、字符串等。我们需要管理。只有当它在这里被定义时，我们才能得到您在vue.js的组件中定义的这个对象的状态

吸气剂

Getter有点类似于vue.js的计算属性当我们需要从存储的状态中派生一些状态时，我们需要使用getter，它将接收状态作为第一个参数，getter的返回值将根据其依赖关系进行缓存，并且只有当getter中的依赖值(状态中需要派生状态的一个值)发生变化时才会重新计算。

3、突变

改变商店状态的唯一方法是提交一个突变，类似于一个事件。每个突变都有一个字符串类型的事件类型和一个回调函数。如果我们需要改变状态的值，我们必须在回调函数中改变它。如果我们想执行这个回调函数，那么我们需要执行相应的调用方法：store.commit

4、行动

Action可以提交变异，store.commit可以在action中执行，action中可以有任何异步操作。在页面中，如果要使用这个动作，需要执行store.dispatch5和module module，只解决了当状态复杂臃肿时，module可以将store划分成模块，每个模块都有自己的状态、突变、动作和getter的问题。

简单存储模式

var store={ debug: true，state: { message: 'Hello！'}，setMessageAction(newValue){ if(this . debug)console . log(' setMessageAction用'，new value触发)this.state.message=newValue }，Clearmessageaction () {if (this。debug)console . log(' clearmessageaction已触发')此。state.message=''}}存储中的所有状态更改都在存储自己的操作中进行管理。这种集中的状态管理可以更容易地理解将发生什么样的突变以及它们是如何被触发的。当错误发生时，我们现在有一个日志来记录在错误发生之前发生了什么。

此外，每个实例/组件仍然可以拥有和管理自己的私有状态：

var vmA=new Vue({ data : { private state : } { sharedstate : store . state } })var vmB=new Vue({ data : { private state : } { sharedstate : store . state } })

三.在项目中使用

1.1.store文件夹通常有以下六个文件。

2.介绍：(创建一个新的store文件夹，并在文件夹下的index.js文件中写入以下内容)

从' vue '导入vue从' vuex '导入vuex从' vuex-persisted state ' vue . use(vuex)3创建持久状态。定义简单模块：

const module={ state : { user : { name : '菜鸟' } }，getter s : { getter s : }，经过必要的修改后{ setUser(state，Payload) {if (payload。hasown property(' name '){ state。用户。名称=有效载荷。name}}}，plugin :[createpersistedstate()]}以上是一个简单的vuex，应用于vuex中对应的商店。存储包含组件的共享状态和改变状态的方法(暂时注意状态相当于外部只读状态，不能通过store.state.user.name改变使用store.commit方法通过触发突变来改变状态。

在名称中获得的记录值为菜鸟：

mounted(){ console.log(这。$ store . state . user . name)；}store.state要获取store中的值，此时打印在我的页面上的值是菜鸟，如果要修改name的值，需要使用store.commit方法触发mutations:

这个。$ store.submit ('setUser '，{name:' kuke _ kuke'})在突变中找到setUser，第二个参数有效负载是传入的对象{name:' kuke _ kuke'}。调用方法hadOwnProperty判断传入的对象是否有名称属性，从而修改状态中的值。此时，user.name的值再次打印在页面上，显示为“kuke _ kuke”。最后导出模块：

Const store=newvuex.store(模块)导出默认存储获取main.js中的模块并使用：

从“”导入存储。/store' new vue ({store})以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。