关于vuex之史上让你懂让你能用又不难的vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex包括State、Getters、Mutations和Actions等核心概念,用于在组件间共享和管理状态。例如,用户登录状态、购物车数据等可以在全局范围内访问和更新。在项目中,通过安装Vuex、创建store对象并挂载到Vue实例上来使用。Vuex使得复杂项目的状态管理和数据流控制更为有序和易于维护。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是vuex

vue状态管理工具,提供这样一个在多个组件间共享状态的插件。
在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来,应用统一的方式进行处理,在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。
在这里插入图片描述

比如用户的登录状态、用户名称、头像、地理位置信息等等,需要在多个界面进行状态共享。

Vuex的使用:

开始:安装vuex

npm install --save vuex

1.先提取出一个公共的store对象,用于保存在多个组件中共享的状态。

import Vue from 'vue'
import Vuex from 'vuex'

//1.安装插件
Vue.use(Vuex)

//2.创建store对象
const store = new Vuex.Store({
	state:{
		cartList:[]
	},
	mutations:{
		//唯一的目的就是修改state中的状态
	//每个方法尽可能完成单一的事件
	add_counter(state, payload){
		payload.count++
	},
	add_counter(state, payload){
			
			state.cartList.push(payload)
	},
	actions: {
	addCart(context, payload) {
		// state.cartList.push(payload)
		// let index = state.cartList.indexOf(payload)
		// 1.查找数组中是否含有该商品
		let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)
		// 2.判断oldProduct
		if(oldProduct){
			// oldProduct.count += 1
			context.commit(ADD_COUNTER, oldProduct)
		}else{
			payload.count = 1
			context.commit(ADD_TO_CART, payload)
		}
	}
	},

})

//3.挂载到vue实例上
export default store

2.将store对象放置在new Vue对象中,这样可以保证在所有的组件中都可以使用到,在main.js中写

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//导入
import store from './store/index.js'

Vue.config.productionTip = false
Vue.prototype.$bus = new Vue()

new Vue({
  render: h => h(App),
	router,
	//挂载
	store
}).$mount('#app')

3.在其他组件中使用store对象中保存的状态即可

通过this.$store.state.属性的方式来访问状态
this.$store.dispatch('addCart', product)来修改状态

Vuex的核心概念:
State单一状态树
Getters:方便别的组建获取state属性,如下:

export default {
	cartLength(state) {
		return state.cartList.length
	}
}

在别的组建可通过以下代码进行获取状态

this.$store.getters.cartLength

也可以使用mapGetters

import { mapGetters } from 'vuex'
	export default {
		name: "Cart",
		components:{
			NavBar
		},
		computed:{
			...mapGetters(['cartLength'])
		}
	}

Mutation:Vuex的store状态的更新唯一方式:提交Mutation
传参可传递对象
在这里插入图片描述

Action:
由于不能在mutation中进行一步操作,但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值