在Vue组件created()生命周期中如何直接获取Vuex的state状态值

解决方法 #

直接在created中获取Vuex对应state值的方法非常简单，如果你用的是带命名空间的friend模块，不需要触发action，直接用原生取值语法即可：

created() {
  // 直接取值，不需要触发action
  const status = this.$store.state.friend.friendstatus
  console.log(status)
}

如果你已经用mapState做了映射，只要写法正确，this.friendstatus也可以直接拿到对应值。 #

现有代码错误修正 #

你现在拿不到值大概率是代码存在多处笔误，导致状态从未被正确存入Vuex：

1. mapState大小写错误：你写的...mapstate是小写s，正确API名是驼峰写法mapState
2. mutations方法名不匹配：你定义的mutations方法名为SET_FRIEND_STATUS，但在action中commit的是STATE_FRIEND_STATUS，名称不一致导致提交完全不生效
3. mutations参数使用错误：SET_FRIEND_STATUS的第二个形参是friend，但赋值时用了未定义的data，应该改为：

SET_FRIEND_STATUS: (state, friend) => {
  state.friendstatus = friend
}

4. action中缺少response定义：你注释写了axios返回结果，但代码中没有接收response参数，要确保你在axios的回调函数中拿到返回值后再执行commit

异步场景处理 #

如果你的friendstatus需要从接口拉取最新值，必须触发action调用接口，因为接口请求是异步操作，你可以用async/await保证拿到接口返回值后再执行后续逻辑：

// 先改造action返回Promise
actions: {
  getFriendStatus: ({commit}, data) => {
    return axios.get('/你的接口地址').then(response => {
      commit('SET_FRIEND_STATUS', response.data.status)
    })
  }
}

// 组件created中调用
async created() {
  // 先拉取最新状态
  await this.$store.dispatch('friend/getFriendStatus')
  // 此时再取值就是接口返回的最新值
  console.log(this.friendstatus)
}

内容的提问来源于stack exchange，提问作者user17368086