为什么我不能在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>

我的商店/模块/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'])
}