vue.js - 为什么我不能在 VueJS/Vuex 中调用命名空间的 getter？

Question

我在控制台中收到 unknown getter: player/shuffle 但经过一些研究后我找不到导致此问题的原因。

• 我确保我的 getter 和状态不是函数；
• 我从 'player/toggleShuffle' 重命名为 'toggleShuffle': 'player/toggleShuffle' 以确保它被正确调用

我感觉问题可能出在店里，但我需要一点帮助。

我的vue文件:

<template>
  <section>
    <sui-grid>
      <sui-grid-row>
        <sui-grid-column :width="3">
          <sui-button-group icons>
            <sui-button icon="fastBackward"/>
            <sui-button icon="play"/>
            <sui-button icon="fast-forward"/>
          </sui-button-group>
        </sui-grid-column>
        <sui-grid-column :width="10">
          ds
        </sui-grid-column>
        <sui-grid-column :width="3">
          <sui-button compact icon="shuffle" :toggle="shuffle" @click="toggleShuffle" />
          Debug: {{ shuffle }}
        </sui-grid-column>
      </sui-grid-row>
    </sui-grid>
  </section>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
    }
  },
  methods: {
    ...mapActions({
      'toggleShuffle': 'player/toggleShuffle'
    })
  },
  computed: {
    ...mapGetters({
      'shuffle': 'player/shuffle'
    })
  }

}
</script>

我的 store/modules/Player.js 文件:

const state = {
  playState: 0, // 0: Stop, 1: Play, 2: Pause
  shuffle: false,
  repeatMode: 0, // 0: No repeat, 1: Repeat All, 2: Repeat this
  cTrackDuration: -1,
  cTrackPos: -1
}

const mutations = {
  STOP (state) {
    state.playState = 0
    state.cTrackPos = -1
  },
  PLAY (state) {
    state.playState = 0
    state.cTrackPos = -1
  },
  SHUFFLE (state) {
    state.shuffle = !state.shuffle
  }
}
const getters = {
  shuffle: state => {
    return state.shuffle
  }
}
const actions = {
  stop ({ commit }) {
    commit('STOP')
  },
  play ({ commit }) {
    commit('PLAY')
  },
  toggleShuffle ({ commit }) {
    commit('SHUFFLE')
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

Answer 1

我认为您的语法不正确。您可以尝试将模块名称作为第一个参数传递给 mapActions 和 mapGetters

methods: {
  ...mapActions('player', ['toggleShuffle'])
},
computed: {
  ...mapGetters('player', ['shuffle'])
}