Vuex的介绍

Vuex是什么:vuex是一个vue的状态管理工具,状态就是数据(一个可以帮助管理vue通用的数据(多组件共享的数据)的插件)

Vuex的使用场景:① 每个状态在很多个组件来使用(个人信息)② 多个组件共同维护一份数据(购物车)

Vuex的优势:① 共同维护一份数据,数据集中化管理 ② 响应式变化 ③ 操作简洁(vuex提供了一些辅助函数)

1 核心概念-State状态

1.提供数据:State提供唯一的公共数据源,所有共享的数据都要统一放到store中的State中存储。

在State对象中可以添加我们要共享的数据

// 创建仓库
const store = new Vuex.Store({
	// state 状态,即数据,类似于vue组件中的data
	// 区别:data是组件自己的数据,state是所有组件共享的数据
	state:{
		count:100
	}
})
2.使用数据

① 通过 store 直接访问

获取 store
(1) this.$store 
(2) import 导入 store

模版中:{{$store.state.xxx}}
组件逻辑中:this.$store.state.xxx
JS模块中:store.state.xxx

② 通过辅助函数

mapState是辅助函数,帮助我们把store中的数据 自动 映射到组件的计算属性中

import {mapState} from 'vuex'
computed:{
	...mapState(['count'])
}

2 核心概念-mutations

vuex 同样遵循单项数据流,组件内不能直接修改仓库的数据。

state数据的修改只能通过mutations

更改 Vuex 的store中的状态的唯一方法是提交mutations。Vuex中的,mutations非常类似于事件:每个mutations都有一个字符串的事件类型和一个回调函数。这个回调函数就是实际进行状态更新的地方,并且会接受state作为他的第一个参数。

1.定义 mutations 对象,对象中存放 state 方法
const store = new Vue.Store({
	state:{
		count:100
	},
	mutations:{
		// 第一个参数是当前store的state属性
		addCount(state,参数){
			state.count += 参数
		}
	}
})
2.组件中提交调用 mutations
this.$store.commit('addCount',n)

向store.commit传入的额外参数称为mutations的载荷(payload)

注意点:mutations参数有且只能有一个,如果需要多个参数,可以包装成一个对象

3.通过 strict:true 可以开启严格模式

辅助函数:mapMutations

mapMutations 和 mapState 很想像,他是把位于mutations中的方法提取出来,映射到组件methods中

3 核心概念-actions

mutations 必须是同步的(便于监测数据变化,记录调试)

actions 处理异步操作

Actions类似于mutation,不同在于 :① Action 提交的是 mutation,而不是直接变更状态。② Action 可以包含任意异步操作

1.提供 actions 方法

action函数接受一个与store实例具有相同方法和属性的context对象,因此可以调用 context.commit 提交一个 mutation

actions:{
	setAsyncCount(context,num){
		setTimeout(()=>{
			context.commit('changeCount',num)
		},1000)
	}
}
2.页面中 dispatch 调用
this.$store.dispatch('changeCount',200)

辅助函数:mapActions

mapActions 是把位于 actions 中的方法提取出来,映射到组件methods中

你可能感兴趣的:(vue.js,javascript,前端)