uni-app下，通过maState辅助函数获取内容

最新推荐文章于 2024-03-14 12:03:14 发布

姚华军

最新推荐文章于 2024-03-14 12:03:14 发布

阅读量845

点赞数 1

分类专栏： vue开发 uni-app 文章标签： vue.js uni-app mapState 对象展开运算符

本文链接：https://blog.csdn.net/yhj_911/article/details/120670372

版权

vue开发同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

uni-app

4 篇文章 0 订阅

订阅专栏

本文介绍了Vuex中如何使用mapState辅助函数来简化组件中计算属性的定义，包括三种不同的使用方式：直接传入对象、传入字符串数组以及结合组件自身的data使用对象展开运算符。这种方式可以减少代码重复，提高代码的可读性和维护性。

摘要由CSDN通过智能技术生成

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键：

/store/index.js

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

Vue.use(VueX)

const store = new VueX.Store({
	state:{
		"username": "foo",
		"age": 18
	}
})
export default store

main.js

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
app.$mount()

第一种方式

<template>
	<view>
		{{username}} - {{age}}
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				firstName: "Li"
			}
		},
		computed: mapState({
			username: state => state.username,
			age: state => state.age
		})
	}
</script>

第二种方式
当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组

		computed: mapState([
			'username',
			'age'
		])

第三种方式
为了能能够使用this获取组件自己的data数据，必须使用常规函数
mapState函数返回的是一个对象，使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给computed属性，简化写法

<template>
	<view>
		{{username}} - {{age}}
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				message: "hello world!",
				firstName: "Li"
			}
		},
		computed: {
			...mapState({ // 对象展开运算符
				username: function (state) {
					return this.firstName + '-' + state.username
				},
				age: state => state.age
			})
		}
	}
</script>