Vuex mapstate 对象未定义和“[vuex] 未知突变类型：”

Posted 2023-02-22

【中文标题】Vuex mapstate 对象未定义和“[vuex] 未知突变类型：”

【英文标题】：Vuex mapstate object undefined and "[vuex] unknown mutation type: "

【发布时间】：2018-08-17 23:28:29

【问题描述】：

我是 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  

Component.vue

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

ma​​in.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 对象吗？

谢谢。

【问题讨论】：

你是如何设置你的模块的？实际上我没有看到任何证据表明您正在使用 vuex-modules？

您是否为您的模块命名了......即在您的模块中设置namespaced: true？

不，我会尝试设置命名空间，谢谢

【参考方案1】：

考虑：

您的 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  

并且 ma​​in.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");

【讨论】：

是的，我这样做了，但你知道为什么我的突变停止工作了吗？ "[vuex] 未知突变类型："

非常感谢！

【参考方案2】：

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

因此，您应该将模块名称作为第一个参数传递给mapState 帮助程序，以便使用该模块作为上下文完成所有绑定。见Binding Helpers with Namespace

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

【参考方案3】：

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

// 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 modules docs

【参考方案4】：

真的在文档中不清楚，但命名空间：true 是 需要使用地图功能。

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

【参考方案5】：

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

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