Vuex mapstate 개체가 정의되지 않았으며 [vuex] 알 수 없는 변환 유형: "

Vuex mapstate 개체가 정의되지 않았으며 [vuex] 알 수 없는 변환 유형: "

vue.js 및 vuex는 처음이고 mapstate 객체에 문제가 있습니다.첫 번째로 제 스토어에는 모듈이 1개밖에 없습니다.

-Store
 -index.js
 -mutations.js
 -actions.js
 -state.js

state.syslog:

export default {
    userInfo: {
        messages: [{ 1: 'test', 2: 'test' }],
        notifications: [],
        tasks: []
    }
}

따라서 userInfo 오브젝트에 접속하려고 하면 모든 것이 정상적으로 동작합니다.

computed: {
    ...mapState(["userInfo"]),
}

그 후 모듈을 만들기로 했습니다.

-Store
 -modules
  -ldap.js
 -commons.js
 -index.js

그래서...userInfo에 있습니다.commons.js파일을 만들고 이제 객체를 얻으려고 하면 항상 얻을 수 있습니다.undefined:

공통.표준

// state
const state = {
    userInfo: {
        messages: [{ 1: 'test', 2: 'test' }],
        notifications: [],
        tasks: []
    }
}

export default {
    actions,
    mutations,
    state  
}

요소.표시하다

computed: {
    ...mapState(["userInfo"]), // <---- undefined
}

main.filename:

import Vue from 'vue'
import Vuex from 'vuex'
import commons from './commons'
import ldap from './modules/ldap'

Vue.use(Vuex)

export default new Vuex.Store({
    modules : {
        commons,
        ldap
    } 
})

userInfo 객체에 액세스하는 방법을 알려주시겠습니까?

고마워요.

고려 사항:

• commons.js는 다음과 같습니다.

  // state
  const state = {
      userInfo: {
          messages: [{ 1: 'test', 2: 'test' }],
          notifications: [],
          tasks: []
      }
  }
  
  export default {
      namespaced: true, // <== make sure this is defined
      actions,
      mutations,
      state  
  }
  

• main.js는 다음과 같이 Import합니다.

  import commons from './commons'
  // ..
  export default new Vuex.Store({
      modules : {
          commons,
          ldap
      } 
  })
  

• 그런 다음 컴포넌트를 업데이트합니다.vue:

  import { mapState } from 'vuex'
  
  // ...
  
  computed: {
      ...mapState('commons', ["userInfo"]), // <== add module name here
  }
  

  또는

  import { createNamespacedHelpers } from 'vuex'
  
  const { mapState, mapActions } = createNamespacedHelpers('commons')
  
  // ...                          notice module name above ^^^^^^^^^
  
  computed: {
      ...mapState(["userInfo"]),
  }
  

[vuex] 알 수 없는 변환 유형: "

이제 네임스페이스에 이름을 붙여서commons모듈, 모듈의 돌연변이는 이제 접두사가 붙어야 합니다.

예를 들어 다음과 같은 돌연변이가 있다고 가정해 봅시다.

const mutations = {
    changeName(state, data) {
        state.name = data;
    }
}
export default {
    namespaced: true, 
    actions,
    mutations,
    state  
}

그리고 당신은 그것을 다음과 같이 사용했죠:

this.$store.commit('changeName', "New Name");

이제 다음과 같이 사용:

this.$store.commit('commons/changeName', "New Name");

내 생각에 너는 모듈들을 더 많이 이해한 것 같아.namespaced: true를 참조해 주세요.

따라서 모듈 이름을 첫 번째 인수로 전달해야 합니다.mapState모든 바인딩이 해당 모듈을 컨텍스트로 사용하도록 도우미를 지정합니다.네임스페이스를 사용한 바인딩 도우미 참조

computed: { 
    ...mapState('commons' , ["userInfo"])
}

여기에서는 각 모듈을 개별 저장소로 정의해야 합니다.

// authStore.js

import mutations from './authMutations'
import actions from './authActions'
import getters from './authGetters'

const initialState = {
  ...
}

export default {
  state: initialState,
  mutations,
  actions,
  getters
}

그런 다음 모듈을 등록합니다.

import authStore from './authStore'

const store = new Vuex.Store({
  modules: {
   {...authStore, namespaced: true},
   {...postStore, namespaced: true} // some other module defined like auth
  }
})

new Vue({
  ....
  store: store
})

그런 다음 컴포넌트에서 다음을 사용합니다.

import { createNamespacedHelpers } from 'vuex'

// map state and actions of the module
const { mapState, mapActions } = createNamespacedHelpers('auth')

export default {
  computed: {
     ...mapState({
       prop1: 'prop1'
     })
  }
}

Vuex 모듈 문서

매뉴얼에서는 불명확하지만 이름표시는 다음과 같습니다.지도 기능을 사용하려면 true가 필요합니다.

적어도 이 토론의 마지막 코멘트에 대해서는http://https://github.com/vuejs/vuex/issues/855 를 참조해 주세요.

모듈 네임스페이스를 사용할 필요 없이 mapstate의 콜백 배리언트를 사용할 수 있습니다.

computed: {
    ...mapState({
        userInfo: state => state.commons.userInfo,
    }),
},

언급URL : https://stackoverflow.com/questions/49192961/vuex-mapstate-object-undefined-and-vuex-unknown-mutation-type