VueX

VueX 😃

简介

  • vue开发过程中使用的状态管理工具
  • 管理项目中的数据->不必通过频繁组件传参来同步某个参数的值
  • 特性
    • 全局状态管理
    • 数据响应式
    • 数据分发可以同步(mutation)或者异步(action)
    • 模块化

安装

npm i vuex -s

使用

初始化store文件夹下的index

import Vue from 'vue'
import VueX from 'vuex'

// 挂载VueX
Vue.use(Vuex)

// 创建Vuex对象
const store = new Vuex.store({
	state:{
		// 存放的键值对就是要管理的状态
		name: 'kk'
	}
})
// 将store导出
export default store;

挂载到Vue实例

new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

组件中使用VueX

<p>{{$store.state.name}}</p>
this.$store.state.name

核心内容

VueX中包含如下成员

  • state 存放状态
  • mutations state 成员操作
  • getters 加工state成员给外界
  • actions 异步操作
  • modules 模块化状态管理

VueX工作流程

image-20230823201319331

  • 首先Vue使用VueX是需要向后端发送请求或者异步操作,需要dispatch VueX中actions的方法,以保证数据同步,也就是说,action就是为了让mutation中的方法可以在异步操作中起作用
  • 没有异步操作,可以直接提交状态中的mutation中自己编写的方法来操作state成员不能直接操作state成员

mutations

  • 操作state数据的方法的集合,可以对state内的数据进行增删改

mutations使用方法

mutations方法都有默认的形参([state][,payload])

  • state是当前vuex对象中的state
  • payload是该方法在被调用是传递参数使用的
// store中初始化mutation
const store = new VueX.store({
state:{
	name:null
},
mutations:{
	EDIT(state, name)
	{
		state.name = name;
	}
}
})

// 组件中调用
//                 方法名   参数
this.$store.commit('EDIT', 'jack')
this.$store.commit('EDIT', {age:18, name:'jack'})

增删state中的成员

在mutations的方法中进行操作

// 增加成员
Vue.set(state,"age", 15);

// 删除成员
Vue.set(state, "age");

getters

  • 对state中的成员加工后传递给外界
  • 有两个默认参数
    • state
    • getters:当前getters对象,用于将getters下的其他getter方法拿来使用
// store中初始化
getters:{
	getInfo(state){
		return "姓名"+state.name;
	},
	getFullInfo(state,getters){
		return getters.getInfo + "年龄"+state.age;
	}
}

// 组件中使用
this.$store.getters.getInfo;

actions

  • 直接在mutations中进行异步操作会使数据失效
  • actions专门进行异步,最终提交mutations方法
  • 有两个默认参数
    • context:上下文(相当于this)对象
    • payload:挂载参数
// store中定义初始化
actions:{
	aEdit(context, payload){
		setTimeout(()=>{
			//             进行异步的方法名  挂载参数
			context.commit('edit',         payload);
		}, 2000)
	}
}

// 组件中调用
this.$store.dispatch('aEdit', {age:10})

// 将异步操作封装为promise对象
actions:{
aEdit(context, payload){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			//             进行异步的方法名  挂载参数
			context.commit('edit',         payload);
		}, 2000)
	})
}
// 封装为promise对象后组件中使用
this.$store.dispatch('aEdit', {age:10})
.then(...)
.catch(...)

modules

  • 当项目庞大时,可以采取模块化管理模式
  • 将store分割成模块
  • 每个模块有自己的state、mutation、action和getter
modules:{
	a:{
		state:{},
		getters:{}
	}
}

// 组件内调用模块a的状态
this.$store.state.a
// 提交和dispatch某个方法和之前用于,会自动执行所有模块内对应type的方法
this.$store.commit('edit');
this.$store.dispatch('aEdit');

模块的细节

模块中mutations和getters中的方法接受的第一个参数是自身局部模块的state

modules:{
	a:{
		state:{key:1},
		mutations:{
			edit(state){
				state.key = 1;
			}
		},
		getters:{}
	}
}

getters中方法的第三个参数是根节点的state

modules:{
	a:{
		state:{key:1},
		getters:{
			getKey(state, getter, rootState)
			{
				return rootState.key+state.key;
			}
		}
	}
}

actions中局部模块状态是context.state,根节点状态是context.rootState

modules:{
	a:{
		state:{key:1},
		actions:{
			aEdit(context){
				if(context.state.key == context.rootState.key)
				context.commit('edit');
			}
		}
	}
}

VueX的辅助函数

  • mapState
  • mapMutations
  • mapGetters

使用准备

使用前需要从vuex导入

import{ mapState, mapMutations, mapGetters } from 'vuex'

mapState

  • 作用:拿到vuex中state的数据
  • 接收
    • 单个数据接收
    • 多个数据接收
// 映射this.name为store.state.name
// 单个数据接收
computed:mapState({
	'name'
})

// 多个数据接收
computed:{
	...mapState(['name'])
}

// 组件中使用,被映射为this.name 
this.name

mapMutations

  • 作用:调用方法修改vuex中的属性,可以实时更新vuex
  • 接收方法:可以接收多个方法
methods:{
	...mapMutations({'方法名1','方法名2'})
}

// 组件中使用,被映射为this.方法名
this.func

mapGetters

  • 作用:对vuex中数据操作并返回
  • 接收
computed:{
	...mapGetters(['getName']),
}

// 组件中使用,被映射为this.getName
this.getName
posted @ 2023-11-17 09:46  starkss  阅读(7)  评论(0)    收藏  举报