Question

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

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

感谢。

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

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"]),
}

＆＃34; [vuex]未知突变类型：＆＃34;

由于您现在正在为commons模块命名空间，因此模块＆＃39; 突变现在必须加上前缀。

所以，说你有一个突变：

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");

Answer 2

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

initializeApp() {
  this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
  this.networkCheck();
  this.netWorkCheck.initializeNetworkEvents();
  }

networkCheck() {
    this.events.subscribe('network:online', () => {
        this.generic.showToast("Network Available");
        console.log('network connected!');
    });

    this.events.subscribe('network:offline', () => {
        debugger;
        if(this.nav.getActive().name!='NoInternetPage' || this.nav.getActive().name==null)
            this.nav.push('NoInternetPage');
    });
}
}

然后，注册模块

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

Vuex modules docs

Answer 3

我猜你在模块中添加了downloadRef.getFile(localFile) .addOnSuccessListener(new OnSuccessListener<FileDownloadTask.TaskSnapshot>() { @Override public void onSuccess(FileDownloadTask.TaskSnapshot taskSnapshot) { dialog.dismiss(); } }).addOnProgressListener(new OnProgressListener<FileDownloadTask.TaskSnapshot>() { @Override public void onProgress(FileDownloadTask.TaskSnapshot taskSnapshot) {} }).addOnFailureListener(new OnFailureListener() { @Override public void onFailure(@NonNull Exception exception) { Toast.makeText(WallOptionActivity.this, "Download failed!", Toast.LENGTH_SHORT).show(); } });，已经为你的模块添加了空间。

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

mapState

Answer 4

确实在文档中不清楚，但已命名空间：需要才能使用地图功能。

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

Answer 5

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

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

Vuex mapstate对象未定义和＆＃34; [vuex]未知突变类型：＆＃34;

5 个答案: