Search code examples
vue.jsvuex

Vue getters dont work - only get content at string of function


Getters in Vuex dont work. Why I dont have table of objects? I get function in string...

export const state = () => {
  return{
    users: [
      {name: 'Test', surname: 'Testowski'},
      {name: 'Michał', surname: 'Topór'},
      {name: 'Jan', surname: 'Janowski'},
      {name: 'Ewa', surname: 'Jakas'},
      {name: 'Tessst2', surname: 'Testowska'}
    ]
  }
}

export const getters = {
  getUsers: (state) => state.users
}

export default {
  name: "StatusPanel",
  computed:{
    users(){
      const tmp = this.$store.users.getters.getUsers;
      console.info(tmp);
      return tmp
    }
  }
}

What is wrong, why console.log is:

"ƒ getUsers(state) { return state.users; }"

I tried add "()" in the end to maybe execute this function but then: "Cannot read property 'users' of undefined""

What I do wrong?


Solution

  • Per the documentation here: https://vuex.vuejs.org/guide/getters.html

    Your store should be defined as:

    const store = new Vuex.Store({
      state: {
        users: [...]
      },
      getters: {
        users: state => state.users
      }
    })
    

    Then you should be able to access this.$store.getters.getUsers. I believe the problem is that you're not using new Vuex.Store({...}).