web-dev-qa-db-ja.com

Vuexマップ状態オブジェクトが未定義で「[vuex]不明なミューテーションタイプ：」

私はvue.jsとvuexを初めて使用し、mapstateオブジェクトに問題があります。最初に、ストアにモジュールが1つしかありません。

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

state.js：

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が取得されます。

commons.js

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

export default {
    actions,
    mutations,
    state  
}

Component.vue

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

main.js：

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オブジェクトにアクセスする方法を教えてください。

ありがとう。

vue.jsvuejs2vuexvuex-modules
4
Fabio Venturi Pastor

考慮事項：

  • 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 commons from './commons'
// ..
export default new Vuex.Store({
    modules : {
        commons,
        ldap
    } 
})

  • 次に、updateon Component.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");
9
acdcjunior

モジュールにnamespaced: trueを追加して、モジュールに名前を付けたと思います。

したがって、モジュール名を最初の引数としてmapStateヘルパーに渡して、すべてのバインディングがそのモジュールをコンテキストとして使用して行われるようにする必要があります。 名前空間を使用したヘルパーのバインド を参照してください。

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

各モジュールを個別のストアとして定義する必要があります。ここではいくつかの疑似例を示します。

// 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モジュールのドキュメント

1
DobleL

ドキュメントでは本当に不明ですが、名前空間が付けられています：trueは必須マップ関数を使用します。

少なくともこのディスカッションの最後のコメントの時点で https://github.com/vuejs/vuex/issues/855

1
Nathaniel Rink

モジュールに名前空間を付ける必要なしに、mapstateのコールバックバリアントを使用できます。

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