javascript - 如何使用 Vuex 创建模块并使用 mapState() 获取数据

Question

我尝试将 Vuex 代码分离到模块中，但无法从 mapState() 获取数据。

创建模块和使用映射的最佳方式是什么？

我有一个存储文件夹:

├── store
│   └── index.js
|   └── testStore.js
|

在index.js中我有:

import Vue from "vue";
import Vuex from "vuex";

import { testStore } from './testStore'

Vue.use(Vuex);

export default new Vuex.Store({
  modules : {
    testStore,
  }
});

在 testStore.js 中我有:

export const testStore  = 
{
    namespaced: true,
    state,
    mutations,
}


const state = 
{
    social: false,
    normal: true,

};
const mutations = 
{
    // setters
    setSocial(state, payload) {
      state.social = payload;
    },
    setNormal(state, payload) {
        state.normal = payload;
    },
};

我有一个测试组件来尝试:(我使用 Vuetify)

testComponent.vue:

<template>
  <v-container>
    <v-layout justify-center>
        <v-btn class="primary" @click="displaydata">test</v-btn>
    </v-layout>
  </v-container>
</template>

<script>

import { mapState, mapMutations } from 'vuex'

export default {
    computed: {
        ...mapState('testStore',['normal','social']),
    },
    methods: {
        ...mapMutations('testStore',['setNormal','setSocial']),

        displaydata() {
            // eslint-disable-next-line
            console.log(this.normal);
            // eslint-disable-next-line
            console.log(this.social);
        } 
    }
};
</script>

当我单击“测试”按钮时，控制台显示:未定义。

那么，到底出了什么问题呢？ :(

Answer 1

这有一个非常简单的解决方案(我没有见过):

在 testStore.js 中，export const testStore 位于开头。

因此，右侧的 testStore.js 非常相似，但末尾有 export:

const state = 
{
    social: false,
    normal: true,

};
const mutations = 
{
    // setters
    setSocial(state, payload) {
      state.social = payload;
    },
    setNormal(state, payload) {
        state.normal = payload;
    },
};

export const testStore  = 
{
    namespaced: true,
    state,
    mutations,
}