VUEX吸气剂。如何从商店获取状态

时间:2020-02-21 09:04:36

标签: vue.js vuex

因此,当前,我有一个在模块中创建和存储,通过存储导入并在“主页”页面中使用的项目列表。 我正在使用“ mapGetters(['allProjects']),它正在我的列表中。但是如何在方法等中引用该列表。

我的“ projectList.js模块”看起来像这样;

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

然后我从首页开始运行

created() {this.fetchProjects()}

并通过

获取结果
computed: mapGetters(['allProjects'])

我可以通过使用“ project.title”在我的代码中使用它,但是当我运行

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

我得到“控制台测试[对象对象],[对象对象]”如何正确调用数组/对象?

1 个答案:

答案 0 :(得分:1)

正确使用组件的方法是使用地图获取器:

$ awk -F, -v max=0 '{
>     lines[n++] = $0             # store lines indexed by line number
>     fields[lines[n-1]] = NF     # store number of field indexed by $0
>     if (NF > max)               # find max NF value
>         max = NF
> }
> END {
>     for(i=0;i<max;i++)          # form string with max commas
>         commastr=commastr","
>     for(i=0;i<n;i++)            # loop appended substring of commas
>         printf "%s%s\n", lines[i], substr(commastr,1,max-fields[lines[i]])
> }' file
1,1,,,,
A,B,C,D,E,F
2,2,,,,
3,3,3,,,
4,4,4,4,,

然后您可以调用它

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