다른 모듈 작업에서 vuex 모듈 상태 가져오기

다른 모듈 작업에서 vuex 모듈 상태 가져오기

나는 vuex 스토어 컴포넌트와 조금 헷갈린다.

다른 모듈의 상태를 어떻게 얻어야 하는가?나는 상점에서 데이터를 얻기 위해 다른 방법을 시도했고 항상 옵저버 오브젝트를 얻었다.관찰자에게 노크하는 올바른 방법은 무엇인가?

만약 내가 이 물건에서 직접 무언가를 얻으려고 한다면, 예를 들면,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 }
    })

랭 모듈, 여기가 내가 가게를 구하려는 곳이야

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 호스트를 통해 생성될 것이다.

속성을 가져오려고 한다고 가정해 봅시다.userId목적에서userDetailsVuex 스토어 모듈에서user.js.

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

다음과 같은 방법으로 액세스할 수 있다.action

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

참고: 이후rootState파일 이름 이전user, 스토어 모듈 파일이 중첩된 폴더 안에 있는 경우 해당 경로를 추가하십시오.

참조URL: https://stackoverflow.com/questions/47371528/get-vuex-module-state-in-another-module-action