CODEWITHSUNDEEP
vue.jsvuex
HypeWolf
HypeWolf

Reputation: 850

Why can't I call a namespaced getter in VueJS/Vuex?

I'm getting unknown getter: player/shuffle in the console but after some research I cannot find what is causing this.

I got the feeling the issue might be in the store but I need a little help.

My vue file:

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

My store/modules/Player.js file:

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
}

Upvotes: 3

Views: 791

Answers (1)

ittus
ittus

Reputation: 22403

I think your syntax is incorrect. You can try passing module name as first parameter to mapActions and mapGetters

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

Upvotes: 1

Related Questions