vuex的基本

vuex

1、概念

1.1组件之间共享数据

1. 父向子传值 v-bind属性绑定
2. 子向父传值：v-on 事件绑定
3. 兄弟共享数据 ：EventBus
4. $on 接收数据的组件
5. $emit发送数据的组件

1.2vuex是什么

vuex是组件全局数据管理机制，可以实现组件之间的共享数据

1.3好处

1. 易于开发
2. 实现共享数据，提高效率
3. vuex中的数据是响应式的，

2、vuex的基本使用

2.1安装

npm install vuex --save

2.2导入vuex

import Vuex from 'vuex'
Vue.use(Vuex)

2.3创建store对象

const store=new Vuex.Store({
    state:{
        count//存放数据
    }
})

2.4挂载到vue实例中

new Vue({
    store,
})

3、核心概念

vuex中的主要核心概念有

1. State
2. Mutation
3. Action
4. Getter

3.1State

提供唯一的公共数据源，所有的共享数据统一放到store中的state中进行存储

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

this.$store.state.变量名

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

1. 导入mapState函数

   import {mapState} from 'vuex'
   //将全局数据，映射到当前组件计算属性中
   ···
   computed:{
      ...mapState(['count'])
   }
   ···
   

vuex中不推荐组件直接变更数据，应该使用mutation变更数据

3.2Mutation

1. 可以集中监听所有数据的变化

定义Mutation

const store = new Vuex.Store({
	state:{
		count:0
	},
	mutation:{
		add(state){
			//变量变更
			state.count++
		}
	}
})

在组件中触发mutation中的函数

methods:{
	handle1(){
		//触发mutation的第一中方式
		this.$store.commit('add')
	}
}

mutation中的函数可以传递参数

其中commit的作用是调用mutation中的函数

在组件中触发mutation函数的第二种方式

\\导入mapMutation函数从vuex中
import {mapMutation} from 'vuex'
//映射到当前组件的方法
methods:{
	...mapMutation(['add'])
}

mutation 中不能写异步的代码，action是处理异步操作

3.3Action

处理异步任务

如果处理异步操作变更数据，必须通过action，不能使用mutation，但在action中还是要通过触发mutation的方式来间接变更数据

const store= new Vuex.Store({
	...
	mutation:{
		add(state){
			state.count++
		}
	},
	action:{
		addasync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000)	
		}		
	}
})

context相当于vuex的实例对象

组件触发action函数的第一种方式

methods:{
	handle(){
		//触发action的第一种方式
		this.$store.dispatch('addasync')
	}
}

组件触发action函数的第二种方式

//导入mapAction函数从vuex中
import {mapAction} from 'vuex'
// 映射到methods中
methods:{
	...mapAction(['addasync'])
}

3.4Getter

Getter用于对Store中的数据进行加工处理形成新的数据

1. Getter可以对store中的已有的数据加工处理形成新的数据，类似于vue中的计算属性
2. store中的数据发生改变，getter中的数据也会改变

定义getter

const store= new Vuex.Store({
	state:{
		count:0
	},
	getter:{
		showNum:state=>{	
			return state.count
		}
	}
})

主要是包装成新的数据

使用getter

this.$store.getter.名称

第二种方式

import {mapGetter} from 'vuex'

computed:{
	...mapGetter(['showNum'])
}