Vue3 使用mapState
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3 使用mapState相关的知识,希望对你有一定的参考价值。
参考技术A 如何在 Vue3 中更方便快捷地 获取 Vuex 中state 中的多个值假设 在 state 存在值,需要全部获取
页面中展示
2.Vue3 中提供了 useStore() 进行获取。但不能直接像Vue2 那样通过mapState() 进行一次性获取多个值,只能一次获取一个
封装
使用
Vuex mapState的基本使用
mapState把Store中的state映射到组件中的计算属性
Store文件
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: ‘Hello world‘,
count: 0
},
mutations:{
},
actions:{
},
modules:{
}
})
vue文件
<template>
<div>
<p>count: {{count}}</p>
<p>msg: {{msg}}</p>
</div>
</template>
<script>
import { mapState } from ‘vuex‘
export default {
computed:{
/**
相当于
count: state => state.count
msg: state=> state.msg
*/
...mapState([‘count‘,‘msg‘])
}
}
</script>
如果vue文件已经存在count
msg
属性使用对象形式生成计算属性
<template>
<div>
<p>count: {{num}}</p>
<p>msg: {{message}}</p>
</div>
</template>
<script>
import { mapState } from ‘vuex‘
export default {
computed:{
/**
相当于
num: state => state.count
message: state=> state.msg
*/
...mapState({num: ‘count‘, message: ‘msg‘})
}
}
</script>
以上是关于Vue3 使用mapState的主要内容,如果未能解决你的问题,请参考以下文章