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的主要内容,如果未能解决你的问题,请参考以下文章

vue3基本使用 详细说明!!!

Vue3 学习总结笔记 (十三)

Vue3 学习总结笔记 (十三)

vue3视频播放插件vue3-video-play的具体使用方法

Vue3/Csswindicss在Vue3中的安装与使用

vue3教程