vue - vuex详细说明

状态管理

Vuex是什么？

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

个人理解：Vuex是一个用来管理组件间通信的插件

为什么要用Vuex？

我们知道组件是独立的，并且希望相互通信。目前我只知道道具选项，但这仅限于亲子组件之间的交流。如果兄弟组件想要相互通信怎么办？嗯，应该有办法。抛开如何实现的问题，想一想，作为一个大中型项目，面对大量的组件间通信和大量的逻辑代码，会不会很疯狂？那么为什么不“携带”组件间共享的数据，并在一定的规则下管理数据呢？这是Vuex的基本思路。

Vuex的特点是什么？

如何使用Vuex？

导入Vuex.js文件

创建实例：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head script src=' http3360。/js/vuex . js '/script script src=' http :/js/vue 2 . 0 . js '/script body div id=' app '/div/body script vue . use(Vuex)；//在创建Vue实例之前，varmystore=new vuex . store({ state : {//存储组件之间共享的数据，名称为：' jjk'})，经过突变后的3360 {//显式更改状态中的数据}，getter s 3360 {//获取数据的方法}，actios : { Newvue({ El : ' # app '，data: {name3360' dk'}，store: my store，mounted

新Vuex。Store({})是指创建一个Vuex实例，通常需要注入到Vue实例中。Store是Vuex的一个核心方法，字面意思是“仓库”。Vuex商店反应迅速。当Vue组件从store读取状态(state选项)时，如果store中的状态被更新，它会及时响应其他组件(类似于双向数据绑定)，不能直接改变Store的状态。更改状态的唯一方法是显式提交更改(突变选项)

他有四个核心选项：状态突变获取者动作(将在下面详细分析)

这是上面的代码：

如何获取状态的数据？

通常，状态数据将从组件的计算属性中获得(因为计算属性将监控数据的变化，并在数据变化时做出响应)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head script src=' http3360。/js/vuex . js '/script script src=' http :/js/vue 2 . 0 . js '/script body div id=' app ' hello/hello/div/body script vue . use(Vuex)；varmystore=new vuex . store({ state : {//存储组件之间共享的数据，名称为：' jjk'})，经过突变后的3360 {//显式更改状态中的数据}，getter s 3360 {//筛选状态数据}，actos : {/} })vue.component(' hello '，{ template:'p{{name}}/p '，computed 3360 { name 3: function(){返回此$store.state.name } }，Mounted : function(){ console . log(this)})new vue({ El : ' # app '，data: {name3360' dk'}，store3360 mystore，Mounted 3360 function(){ console . log(this)}。

状态：用于存储组件之间共享的数据。它类似于组件的数据选项，只是数据选项用于存储组件的私有数据。

Getters:有时候，我们需要过滤状态的数据。这些操作都在组件的计算属性中执行。如果多个组件需要过滤数据，那么我们必须处处重复编写计算属性函数；或者将其提取到一个通用工具函数中，并在很多地方导入通用函数——两者都不理想。如果把数据过滤后传递给计算属性，就不会那么麻烦了。吸气剂会这样做。您可以将getters视为store的计算属性。getters下的函数接收状态作为第一个参数。那么，组件如何获得由getters过滤的数据呢？过滤后的数据存储在$ store.getters对象中。看一个例子：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head script src=' http3360。/js/vuex . js '/script script src=' http :/js/vue 2 . 0 . js '/script body div id=' app ' hello/hello/div/body script vue . use(Vuex)；var mystore=new vuex . store({ state : {//存储组件之间共享的数据，名称为3360' jjk '，年龄为：18}，突变3360 {//显式更改状态中的数据}，getter s 3360 { get age : function(state){ return state。} }，actions : {//} })；Vue.partner ('hello '，{ template : ' pName:{ { name } } Age:{ { Age } }/p '，computed : { name 3360 function(){ return this。$ store.state.name}，age:function(){返回此。$store.getters.getAge } }，mount ed : function(){ console . log(this)})新Vue({ el:'#app '、Data: {name:' dk'}、store: my store、mount ed 3360 function(){ console . log(this)})/script/html以chrome显示：

突变：上面提到的都是如何获取状态的数据，那么如何将数据存储在状态中呢？在Vuex商店中，真正改变状态的唯一方法是进行突变。variations下的函数接收state作为参数，接收payload作为第二个参数，用来记录开发人员使用函数的一些信息，比如提交了什么，提交的目的是什么，并且包含多个字段，所以payload一般是一个对象(实际上，这个东西类似于git的commit)。还有一点需要注意的是，variations方法必须是同步方法！看看这个例子：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head script src=' http 3360 ./js/vuex。js '/script script src=' http :/js/vue 2。0 .js '/脚本正文div id=' app ' hello/hello/div/正文脚本vue。使用(Vuex)；var myStore=new Vuex .存储({ state:{ //存放组件之间共享的数据名称：'jjk '，年龄：18，num:1 }，经必要修改后为：{ //显式的更改状态里的数据change:function(state，a){//state。数量；控制台。日志(状态。num=a)；} }，getter s : { getage :函数(状态){ return state。年龄；} }，actions : {//} })；Vue.component('hello '，{ template : ' p @ click=' changeNum '姓名：{{name}}年龄：{{age}}次数：{{num}}/p '，计算出的： { name : function(){返回此.$store.state.name }，age : function(){ 0返回此$store.getters.getAge }，num:function(){返回这个.$store.state.num } }，挂载ed :函数(){ console。log(this)}，methods : { change num : function(){//在组件里提交//这个。数量；这个$store.commit('change '，10) })，data : function(){ return {//num :5 } })new Vue({ El : ' # app '，data:{ name:'dk' }，store:myStore，挂载的： function(){ console。log(this)})/script/html当点击p标签前铬合金中显示：

点击p标签后：

可以看出：更改状态的数据并显示在组件中，有几个步骤：1.在突变选项里，注册函数函数里面装逻辑代码。2.在组件里，这个$store.commit('change '，有效负载)注意：提交的函数名要一一对应3.触发函数，州就会相应更改4.在组件的计算属性里这个$商店.州获取你想要得到的数据

行动：既然突变只能处理同步函数，我大射流研究…全靠'异步回调'吃饭，怎么能没有异步，于是行动出现了.

行动和突变的区别

1.行动提交的是突变，而不是直接变更状态。也就是说，动作会通过突变，让突变帮他提交数据的变更。

2.行动可以包含任意异步操作ajax、setTimeout、setInterval不在话下

再来看一下实例：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head script src=' http 3360 ./js/vuex。js '/script script src=' http :/js/vue 2。0 .js '/脚本正文div id=' app ' hello/hello/div/正文脚本vue。使用(Vuex)；var myStore=new Vuex .存储({ state:{ //存放组件之间共享的数据名称：'jjk '，年龄：18，num:1 }，经必要修改后为：{ //显式的更改状态里的数据change:function(state，a){//state。数量；控制台。日志(状态。num=a)；}，changeAsync:function(state，a){ console。日志(状态。num=a)；} }，getter s : { getage :函数(状态){ return state。年龄；} }，actions:{//设置延时add:function(context，value){ setTimeout(function(){//提交事件context.commit('changeAsync '，值);},1000) } } });Vue.component('hello '，{ template : ` div p @ click=' changeNum '姓名：{{name}}年龄：{{age}}次数：{ { num } }/p button @ click=' changeNumAnsyc ' change/button/div `，computed : { name : function(){ return this .$store.state.name }，age : function(){ 0返回此$store.getters.getAge }，num:function(){返回这个.$store.state.num } }，挂载ed :函数(){ console。log(this)}，methods : { change num : function(){//在组件里提交//这个。数量；这个$store.commit('change '，10) }，//在组件里派发事件当点击按钮时，changeNumAnsyc触发-行动里的增加函数被触发突变里的changeAsync函数触发changenumansyc : FuncTion(){ this .$store.dispatch('add '，5)；} }，data : function(){ return {//num :5 } })new Vue({ El : ' # app '，data:{ name:'dk' }，store:myStore，mount ed : function(){ console。log(this)})/script/html点击按钮一秒后铬合金中显示：

先整明白上下文分派是什么东西：

背景：背景是与商店实例具有相同方法和属性的对象。可以通过上下文。状态和context.getters来获取状态和吸气剂。

调度：翻译为'派发、派遣'的意思，触发事件时调度就会通知动作（跟犯罪一样一样的)参数跟犯罪也是一样的。

行为的大体流程：

1.在行动选项里添加函数（异步)并提交到对应的函数（在变化选项里)中context.commit('changeAsync '，值);

actions : { add : function(context，value){ setTimeout(function(){ context。commit(' change async '，值)；},1000) } }2.在组件里：ChangeNumanSyc : FuncTion(){ this .$store.dispatch('add '，5)；} 将调度"指向"行动选项里的函数

3.在突变选项里，要有对应的函数changeAsync:function(状态，a){ console。日志(状态。num=a)；}

总结：

各个类型的应用程序接口各司其职突变只管存，你给我（调度)我就存；行为只管中间处理，处理完我就给你，你怎么存我不管；吸气剂我只管取，我不改的行动。放在了方法里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的)突变是写在商店里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它吸气剂。写在了计算里面，这说明虽然吸气剂我们写的是函数，但是我们应该把它当成计算属性来用。

对状态管理的了解就先到这了，细节以后在补充。待续

以上就是边肖介绍的vue - vuex的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！