Get vuex module state in another module action

Question

I'm a little bit confused with vuex store component.

How should I obtain state of another module? I tried a different ways to get data from store and always got Observer object. What is the correct way to knock knock to observer?

If I try to get anything from this object directly, like rootState.user.someVariable then I got undefined response.

Don't have a problem getting state from components.

Edit. Add code

User module

import * as Constants from './../../constants/constants'
import * as types from '../mutation-types'
import axios from 'axios'

const state = {  user: [] }

    const getters = {
       getUser: state => state.user
    }

const actions = {
getUserAction ({commit}) {
    axios({method: 'GET', 'url': Constants.API_SERVER + 'site/user'})
      .then(result => {
        let data = result.data
        commit(types.GET_USER, {data})
      }, error => {
        commit(types.GET_USER, {})
        console.log(error.toString())
      })
  }
}

const mutations = {
 [types.GET_USER] (state, {data}) {
    state.user = data
  }
}

export default { state, getters, actions, mutations }

Mutatinos

export const GET_LANGS = 'GET_LANGS'
export const GET_USER = 'GET_USER'

Store

import Vuex from 'vuex'
import Vue from 'vue'
import user from './modules/user'
import lang from './modules/lang'

Vue.use(Vuex)    
const store = new Vuex.Store({
      modules: {
    user,
    lang
  }
})

Main app

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'

Vue.config.productionTip = false

    new Vue({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }
    })

Lang module, here is the place where I'm trying get store

import * as types from '../mutation-types'
import {axiosget} from '../../api/api'    

const state = {  langList: [] }

const getters = {
  getLangs: state => state.langList
}

const actions = {
// this two action give me similar result
  getLangsAction (context) {
    axiosget('lang') // described below
  },
  getAnotherLangsAction (context) {
    console.log(context.rootState.user) <----get Observer object
  }
}

const mutations = {
  [types.GET_LANGS] (state, {data}) {
    state.langList = data
  }
}

 export default { state, getters, actions, mutations }

axiosget action, api module

  import * as Constants from './../constants/constants'
import store from '../store/index'
import axios from 'axios'

    export const axiosget = function (apiUrl, actionSuccess, actionError) {
      console.debug(store.state.user) // <----get Observer object, previously described
      // should append user token to axios url, located at store.state.user.access_token.token
      axios({method: 'GET', 'url': Constants.API_URL + apiUrl 
 + '?access_token=' + store.state.user.access_token.token})
        .then(result => {
          let data = result.data
          // todo implement this
          // }
        }, error => {
          if (actionError && actionError === 'function') {
           // implement this
          }
        })
    }

Component, that call dispatcher. If i get state via mapGetters in computed properties - there is no problems

<template>
    <div>
   {{user.access_token.token}}
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'ArticlesList',
    computed: mapGetters({
      user: 'getUser'
    }),
    created () {
      this.$store.dispatch('getLangsAction')
      this.$store.dispatch('getAnotherLangsAction')
    }
  }
</script>

What I'm trying to do in this code - get user access token in main site (after login) and all further manipulations with data will be produced via api host.

Define module. You're not giving us much to go on with this, can you provide an example of what you want rather than a screenshot of some console logging ... — webnoob
rootState should work. Show us the code that fails with rootState. — Eric Guan

Meena Chaudhary Meena Chaudhary · Accepted Answer · 2020-01-19T20:00:43

Let's say you want to fetch state an attribute userId from object userDetails in Vuex store module user.js.

userDetails:{
  userId: 1,
  username: "Anything"
}

You can access it in following way in action

authenticateUser(vuexContext, details) {
  userId = vuexContext.rootState.user.userDetails.userId;
}

Note: After rootState and before file name user, add the path to the store module file if it is inside nested folders.

Get vuex module state in another module action

1 Answers