Vuex碎片笔记

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