0
点赞
收藏
分享

微信扫一扫

Vuex碎片笔记

Mezereon 2022-03-25 阅读 67

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
    }
  },
举报

相关推荐

Vuex 笔记

Vuex笔记

vuex 笔记

vuex的笔记

Vuex学习笔记

vuex学习笔记

vue学习笔记--vuex

0 条评论