vuex是什么?它有几种核心属性?和它的基本使用

vuex是什么?

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

好处

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

它有几种核心属性?

Vuex有五个核心概念，state, getters, mutations, actions, modules。

state
提供唯一的公共数据源,所有共享数据都要统一放到Store的State中进行存储

 // 创建store数据源
const store = new Vuex.Store({
	state:{
		name:"张三"
	}
})

// 组件访问State中的数据
this.$store.state.全局数据名称
this.$store.state.name

mutation
用于变更Store中的数据,提交更新数据的方法,必须是同步的(如果需要异步使用action)

// 定义mutation
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
	// 第一个参数是state对象
		add(state){
		// 变更状态
		state.count++
		}
	}
})

// 触发mutation
methods:{
	aa(){
		// add是mutation里面的方法
		this.$store.commit('add')
	}
}

// commit  用来触发mutation里面方法用的
this.$store.commit('mutations方法名',值)

action
action和mutation功能大致相同,不同之处在与action提交的是mutation,而不是直接变更状态,可以包含异步操作(用于处理异步任务)
如果通过异步操作变更数据,必须通过action,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据

// 定义action
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		add(state){
		state.count++
	}
},
actions:{
		// 第一个参数是context
		addAsync(context){
			setTimeout(()=>{
			context.commit('add')
		},1000)
	}
	}
})

// 触发action
methods:{
	abc(){
		// addAsynce 是actions里面的方法
		this.$store.dispatch('addAsynce')
	}
}

// dispatch  用来触发action里面的方法
this.$store.dispatch('addAsynce',值)

getter
从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法
会返回一个新数据,不会影响到state里面的老数据
store中的数据发生变化.getter的数据也会跟着变化

const store = new Vuex.store({
	state:{
		count:0
	},
	getters:{
		userId1:function(state){
			return state.count * 2
		}
	}
})

// 触发getter
this.$store.getters.userId1

modules

模块化vuex
可以让每一个模块拥有自己的state,mutation,action,getters,使得结构非常清晰,方便管理

总结

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex