5

我是 vue.js 和 vuex 的新手，我对 mapstate 对象有疑问，首先我的商店中只有一个模块：

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

组件.vue

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

主.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 对象吗？

谢谢。

4

5 回答 5

12

考虑：

  • 您的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
    } 
})

  • 然后更新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");
于 2018-03-09T12:31:28.663 回答
1

您必须将每个模块定义为单独的商店，这里有一些伪示例。

// 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 模块文档

于 2018-03-09T12:00:09.863 回答
1

我猜你已经通过添加你的模块来命名你namespaced: true的模块。

因此，您应该将模块名称作为第一个参数传递给mapState帮助程序，以便使用该模块作为上下文完成所有绑定。请参阅使用命名空间绑定助手

computed: { 
    ...mapState('commons' , ["userInfo"])
}
于 2018-03-09T12:07:51.787 回答
1

文档中确实不清楚，但命名空间： true 是使用地图功能所必需的。

至少截至本次讨论的最后一条评论 https://github.com/vuejs/vuex/issues/855

于 2018-06-28T19:27:17.527 回答
0

无需命名您的模块，您可以使用 mapstate 的回调变体：

computed: {
    ...mapState({
        userInfo: state => state.commons.userInfo,
    }),
},
于 2018-09-15T09:32:45.333 回答