在另一个模块操作中获取 vuex 模块状态

Posted 2023-03-16

【中文标题】在另一个模块操作中获取 vuex 模块状态

【英文标题】：Get vuex module state in another module action

【发布时间】：2018-05-02 11:06:41

【问题描述】：

我对 vuex 存储组件有点困惑。

我应该如何获取另一个模块的状态？ 我尝试了一种不同的方法来从存储中获取数据并且总是得到 Observer 对象。向观察者敲敲的正确方法是什么？

如果我尝试直接从该对象获取任何内容，例如 rootState.user.someVariable，那么我会得到未定义的响应。

从组件获取状态没有问题。

编辑。添加代码

用户模块

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 

突变体

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

商店

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
  
)

主应用

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 模块，这里是我尝试获取商店的地方

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 动作，api 模块

  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
          
        )
    

组件，即调用调度程序。如果我通过计算属性中的 mapGetters 获取状态 - 没有问题

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

我在此代码中尝试执行的操作 - 在主站点（登录后）获取用户访问令牌，所有进一步的数据操作都将通过 api 主机生成。

【问题讨论】：

定义module。您并没有给我们太多帮助，您能否提供一个您想要的示例，而不是一些控制台日志记录的屏幕截图...

可能是Vuex module

rootState 应该可以工作。向我们展示以rootState 失败的代码。

【参考方案1】：

假设您想从 Vuex 存储模块 user.js 中的对象 userDetails 中获取属性 userId 的状态。

userDetails:
  userId: 1,
  username: "Anything"

您可以在action以下方式访问它

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

注意：在rootState之后和文件名user之前，如果存储模块文件在嵌套文件夹中，则添加路径。