nuxt.jsでの複数moduleの扱い方
nuxt.jsでstoreを使用しています。
複数のstoreを管理したいため、modulesを使用していますが、mutationsで値をセットしようとすると
「[vuex] unknown mutation type: operation/setData」のエラーが出力されます。
(vue.jsで作成したstoreは同じコードで動いています)
storeの中身を確認すると、stateにcountは確認できますが、No propertiesとなっています。
どう修正したら良いのでしょうか?
store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import {test1} from './modules/test1.js';
import {test2} from './modules/test2.js';
Vue.use(Vuex);
export const store = new Vuex.Store({
modules: {
test1: test1,
test2: test2,
}
});
./modules/test1.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const test1 = {
namespaced: true,
state() {
return {
count: 0,
}
},
mutations: {
setCount(state, data){
state.count = data === 'up' ? state.count++ : state.count--;
}
},
getters: {
getModalType(state) {
return state.count;
}
}
};
export default {test1};
main.vue
<template>
<div>
<button @click="count('up')">+</button>
<button @click="count('down')">-</button>
{{$store.state.test1.count}}
</div>
</template>
<script>
export default {
name: 'main',
data () {
return {
};
},
methods: {
count(pram) {
this.$store.commit('test1/setCount', pram);
}
}
};
</script>