Question

我对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 }

Mutatinos

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主机生成。

Answer 1

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

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

您可以在action

中以以下方式访问它

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

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

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

1 个答案: