I've been experimenting with separating my Vuex code into modules, but I'm having trouble retrieving data using mapState().
What's the most effective approach for creating modules and utilizing mapping?
Here's the structure of my store folder:
├── store
│ └── index.js
| └── testStore.js
|
In my index.js, the setup looks like this:
import Vue from "vue";
import Vuex from "vuex";
import { testStore } from './testStore'
Vue.use(Vuex);
export default new Vuex.Store({
modules : {
testStore,
}
});
In the testStore.js file, I define the following:
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;
},
};
To test it out, I created a simple component (using Vuetify):
The testComponent.vue file contains:
<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>
However, when I click on the "test" button, the console shows: undefined.
Can anyone help me figure out what's going wrong with this setup? :(