vuex的基本使用

vuex的基本使用

什么是vuex?

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

优点：

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效地实现组件之间的数据共享，提高开发效率
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

基本使用：

1. 安装vuex依赖包  npm install vuex --save
2. 导入vuex包     import Vuex from 'vuex';
                  Vue.use(Vuex)
3. 创建store对象   const store = new Vuex.Store({
 				  })
4. 将store对象挂载到vue实例中 new Vue({
								store
							})

核心概念：

state:{count:0} 访问state数据的第一种方式: this.$store.state.count
                访问state数据的第二种方式：1. 从vuex中按需导入mapState函数 import {mapState} from vuex
                                         2. 通过mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性 computed:{...mapState(['count'])}
mutations:用于变更state中的数据，集中监控所有数据的变化，不要在这里执行异步操作,只有mutations中定义的函数，才有权力修改state中的数据
                 第一种：组件使用this.$store.commit()
                 第二种：1. 从vuex中按需导入mapMutations函数 import {mapMutations} from 'vuex'
                        2. 通过mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法
                            methods:{ ...mapMutations(['add']) }
actions: 处理异步任务，在actions中还要通过触发mutations的方式间接变更数据
             actions:{
				addAsync(context){
	     			setTimeout(()=>{
                          //在actions中，不能直接修改state中的数据，必须通过content.commit()触发某个mutation才行 
	           			context.commit('add')
                      })
                }
             }
             第一种触发：this.$store.dispatch('addAsync')
             第二种触发：1. 从vuex中按需导入mapActions函数 import {mapActions} from 'vuex'
                        2. 通过mapActions函数，将需要的mutations函数，映射为当前组件的methods方法
                           methods:{ ...mapActions(['addAsync']) }
getters: 用于对store中的数据进行加工包装形成新的数据，类似于vue中的计算属性
             第一种：this.$store.getters.名称
             第二种：import {mapGetters} from 'vuex'  
                          computed:{ ...mapGetters(['newCount']) }