CODEWITHSUNDEEP
vue.jsvuex
KJParker
KJParker

Reputation: 780

VUEX Getter. How do I grab the state from store

So, currently I have a list of projects created and stored in a module, imported through store and used in my "home" page. I am using "mapGetters(['allProjects']), which is pulling in my list. But how do i reference that list in methods, etc.

My "projectList.js module" looks like so;

// Get db projects
import db from '@/firebase/init.js'

const state = {
  projectList: null

}

const getters = {
  allProjects: state => state.projectList
}

const actions = {
  fetchProjects ({ commit }) {
    if (state.projectList == null) {
      const projectLoop = []
      db.collection('Projects')
        .get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            const project = doc.data()
            project.id = doc.id
            projectLoop.push(project)
            // console.log(project)
          })
        })
      // console.log(projectList)
      commit('setProjects', projectLoop)
    }
  }
}

const mutations = {
  setProjects: (state, projects) => (state.projectList = projects)
}

export default {
  state,
  getters,
  actions,
  mutations
}

Which I am then running from my homepage;

created() {this.fetchProjects()}

and the getting the results via

computed: mapGetters(['allProjects'])

I am able to use this in my code by using "project.title" but when i run something like 

console.log('console-test ' + this.$store.getters.allProjects)

I get "console-test [object Object],[object Object]" how do i correctly call the array/object?

Upvotes: 0

Views: 166

Answers (1)

Padavan
Padavan

Reputation: 103

In the component right way to use map getters is:

  computed: {
    ...mapGetters({
      allProjects: 'allProjects'
    })
  },

And Then you can call it

console.log('console-test: ', this.allProjects)

Upvotes: 1

Related Questions