vuex的作用是什么

这篇文章将为大家详细讲解有关vuex的作用是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

vuex是基于vue框架的一个状态管理库,可以管理复杂应用的数据状态,可以方便的实现组件之间的数据共享,例兄弟组件的通信,多层嵌套的组件的传值等等;它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

vuex是一个专为vue。js应用程序开发的状态管理模式,是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态,可以方便的实现组件之间的数据共享,比如兄弟组件的通信,多层嵌套的组件的传值等等。

Vuex采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex也集成到vue的官方调试工具devtools扩展,提供了诸如零配置的穿越调试,状态快照导入导出等高级调试功能。

<强> Vuex中的核心特性

(1)状态:提供唯一的公共数据源,所有共享的数据都要统一放到商店中的状态中存储

在组件中访问状态的方式:

这本。store.state美元。全局数据名称如:这。美元store.state.count

B。先按需导入mapState函数:从“vuex”进口{mapState}

然后数据映射为计算属性:计算:{…mapState((“全局数据名称'])}

(2)突变:用于修改变更商店中美元的数

使用方式:

打开商店。js文件,在突变中添加代码如下:

突变:,{ 　　,,,添加(状态,步){ 　　,,,,,//第一个形参永远都是状态也就国家对美元是象 　　,,,,,//第二个形参是调用添加时传递的参数 　　,,,,,state.count +=步骤; 　　,,,} 　　以前,,}

然后在加法。vue中给按钮添加事件代码如下:

& lt; button  @click=癆dd"在+ 1 & lt;/button> 　　 　　方法:{ 　　添加才能(){ 　　,,,//使用提交函数调用中突变的对应函数, 　　,,,//第一个参数就是我们要调用的突变中的函数名 　　,,,//第二个参数就是传递给添加函数的参数 　　,,,这个。美元store.commit(& # 39;添加# 39;10) 　　,,} 　　}

使用突变的第二种方式:

import  {, mapMutations },得到“vuex” 　　方法:{…mapMutations(['添加'])}

如下:

import  {, mapState mapMutations },得到& # 39;vuex& # 39; 　　 　　export  default  { 　　数据才能(),{ 　　,,,return  {} 　　,,}, 　　方法:{才能 　　,,,,,//获得mapMutations映射的子函数 　　,,,,,…mapMutations((& # 39;子# 39;]), 　　,,,,,//当点击按钮时触发子函数 　　,,,,,子(){ 　　,,,,,,,,,//调用子函数完成对数据的操作 　　,,,,,,,,,this.sub (10); 　　,,,,,} 　　,,}, 　　计算:{才能 　　,,,,,…mapState((& # 39;计数# 39;]) 　　,,,,, 　　,,} 　　}

(3)行动:在突变中不能编写异步的代码,会导致vue调试器的显示出错。在vuex中我们可以使用行动来执行异步操作。
操作步骤如下:

打开商店。js文件,修改动作,如下:

动作:,{ 　　一步addAsync才能(上下文){ 　　,,,setTimeout(()=祝辞{ 　　,,,,,context.commit(& # 39;添加# 39;步骤); 　　,,,},2000) 　　,,} 　　}

然后在加法。vue中给按钮添加事件代码如下:

& lt; button  @click=癆ddAsync"在…+ 1 & lt;/button> 　　 　　方法:{ 　　AddAsync才能(){ 　　,,,这个。美元store.dispatch (& # 39; addAsync& # 39; 5) 　　,,} 　　}

(4) Getter:用于对中存储的数据进行加工处理形成新的数据。

它只会包装商店中保存的数据,并不会修改存储中保存的数据,当商店中的数据发生变化时,吸气剂生成的内容也会随之变化。
打开商店。js文件,添加getter方法,如下:

export  default  new  Vuex.Store ({ 　　.......才能 　　getter才能:{ 　　,,,//添加了一个showNum的属性 　　,,,showNum :, state =祝辞{ 　　,,,,,return  & # 39;最新的计算值为:& # 39;+ state.count; 　　,,,} 　　,,} 　　})

然后打开。vue中,添加插值表达式使用getter

& lt; h4> {{$ store.getters.showNum}} & lt;/h4>

也可以在加法。vue中,导入mapGetters,并将之映射为计算属性

import  {, mapGetters },得到& # 39;vuex& # 39; 　　计算:{ 　　……才能mapGetters ([& # 39; showNum& # 39;]) 　　}

vuex的作用是什么