vuex state 实现组件间传值

最新推荐文章于 2024-03-29 16:28:36 发布

幽幽靖

最新推荐文章于 2024-03-29 16:28:36 发布

阅读量700

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/ws19900201/article/details/99413648

VUE 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了如何通过Vuex来简化组件间状态传递，通过`npm add vuex`安装Vuex并在store.js中定义state。然后在组件中使用mapState辅助函数减少返回state值的代码。以一个实际案例展示：组件一点击确定将输入框内容传递给组件二。

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

npm add vuex 下载vuex

store.js:

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

Vue.use(Vuex)

export default new Vuex.Store({
	state:{
		name:jing,
		age:18,
		look:beautiful
	},
	mutations:{},
	actions:{}
})

组件一：

<div>
	name:{{username}}
	<button @click="add"> 确认</button>
</div>

data(){
	return(){
		//注意 写在data中，因为先赋值给了username，那么store值如有改变，这里将不能发生改变
		// username:this.$store.state.name 
	}
},
computed:{
	username(){
		return this.$store.state.name
	}
}
methods:{
	add(){
		this.$store.state.name = 'jing+1'
	}
}

组件二：

<div>
	name02:{{$store.state.name}}
</div>

但如果sore中有许多的值需要获取就得写很多的 return，有没有更方便的办法呢？
在组件中引入 mapState:

import {mapState} from 'vuex'

//1
computed:mapState(['name','age','look']),
//2
computed:mapState({
	storeName:state => state.name,
	storeAge:state => state.age,
	storeLook:state => state.look
})
//但computed也有自己的运算函数，就不能写1、2这样了
computed:{
	...mapState({
		storeName:state => state.name,
		storeAge:state => state.age,
		storeLook:state => state.look
	})
}

<div>
	name:{{storeName}}
	age:{{storeAge}}
	look:{{storeLook}}
</div>

.
案例：组件一点击确定将输入框的内容添加到组件二中。

store.js:

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

Vue.use(Vuex)

export default new Vuex.Store({
	state:{
		studentList:[]
	},
	mutations:{},
	actions:{}
})

组件一：

<div>
	name:
	<input type="text" v-model="name">
	<button @click="add"> 确认</button>
</div>

export default({
	data(){
		return(){
			name:''
		}
	}
	methods:{
		add(){
			this.$store.state.studentList.push(this.name);
		}
	}
})

组件二：

<div>
	namelist:
	<ul>
		<li v-for="(item, index) in studentList" :key="index">
			{{item}}
		</li>
	</ul>
</div>

import {mapState} from 'vuex'
export default({
	computed:{
		...mapState(['studentList'])
	}
})