Vuex 终极总结

Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

 

使用Vuex统一管理状态的好处

1.能够在Vuex中集中管理共享的数据，易于开发和后期维护

2.实现组件高效的共享数据

3.存储在vuex中数据都是响应式的，能够实时保持数据与页面的同步

 

什么样的数据u适合存储到vuex中

一般只有组件之间共享的数据，才有必要存储到vuex中；对于组件中私有数据，依旧储存在组件自身的data中即可

 

vuex 安装配置

创建store.js文件件，引入mian.js，在mian.js当中引入到全局中，就可以全局使用store

 

vuex的核心概念

State提供唯一的公共数据源

 

组件访问state中数据的第一种方式

this.$store.state.数据名称

 

组件访问state中数据的第二种方式

从vuex中按需导入mapState函数

import{mapState（store的数据），}form  ' vuex'

通过导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed（监听生命周期）计算属性：

将全局引入数据，映射为当前组件的计算属性

computed：{

...mapState （[' 数据名称']）

}

 

Mutation

Mutation用于变更Stroe中的数据 

1.只能通过mutation变更Stroe数据，不可以直接操作Store中的数据

2.通过这种方式操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

 

触发mutation

第一种方法

this.$store.commit('数据名称')

commit的作用是调用某个mutation函数

不要在mutations函数中执行异步

 

actions是用来处理操作异步的，操作的是mutation的数据

this.$store.dispatch('addsy',2)

dispatch是调用触发actions的函数方法

 

getter

getter用于store中的数据进行加工处理形成新的数据

1.getter可以对store中已有的数据加工处理之后形成的数据，类似Vue的计算属性

2.store中的数据发生变化，getter的数据也会发生变化