Vuex碎片笔记_mapgetters(['islogin'])-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43889695/article/details/123736088

本文介绍了如何在Vue.js应用中使用Vuex的状态管理模式。重点讲解了如何利用mapGetters和mapActions辅助函数来简化store中getters和actions的调用，通过实例展示了如何在组件中映射并使用这些方法。

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

Vuex碎片笔记

在Vuex中，可以使用组件内的computed属性，在该属性中通过...mapGetters(['需要映射的getter名称'])将store中需要映射的getters映射为一个局部的getter，那么在使用时，就可以直接通过this.映射的getter名称来使用该属性，同理，也可以在组件的methods中通过映射使用store中的action中的方法

在组件中使用这两种方法时，需要首先在组件内引入mapGetters和mapActions
import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'
代码示例如下

HTML部分

<div class="normal-player" v-show="this.isFullScreen">
//这里的isFullScreen就是我从getters中映射过来的方法

Vue部分

computed: {
    ...mapGetters([
      'isFullScreen'
    ])
  },

//  mapActions部分
methods: {
  ...mapActions([
    'setFullScreen'
  ]),
  selectMusic () {
    this.setFullScreen(true)
  }
}

Vuex部分

state: {
    isFullScreen: false
  },
  // 用于获取全局共享的数据
  getters: {
    isFullScreen (state) {
      return state.isFullScreen
    }
  },