44882


nuxt.jsでstoreを使用しています。  
複数のstoreを管理したいため、modulesを使用していますが、mutationsで値をセットしようとすると  
「[vuex] unknown mutation type: operation/setData」のエラーが出力されます。  
（vue.jsで作成したstoreは同じコードで動いています）  
storeの中身を確認すると、stateにcountは確認できますが、No propertiesとなっています。  
どう修正したら良いのでしょうか？

store/index.js

[code]

    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,
        }
    });
    
[/code]

./modules/test1.js

[code]

    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};
    
[/code]

main.vue

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2018-06-18T02:35:35.253
44833
2018-06-19T08:17:45.547
16768
question
javascript vue.js nuxt.js
nuxt.jsでの複数moduleの扱い方


少しそちらのコード構成とは違うかもしれませんが,修正して動かすことが出来ました.  
Vueを使うのはこれが初めてなので間違っている可能性は大いにあるので気をつけてください.

# store/index.js

storeは定数ではなく関数になります.

[code]

    import Vue from "vue";
    import Vuex from "vuex";
    
    import { test1 } from "./modules/test1.js";
    import { test2 } from "./modules/test2.js";
    
    const store = () =>
      new Vuex.Store({
        modules: {
          test1,
          test2
        }
      });
    
    export default store;
    
[/code]

# store/modules/test1.js

後置インクリメントを使って代入すると,増やす｢前｣の値が代入されてしまうため,通常の加算演算子を使います.

[code]

    import Vue from "vue";
    import Vuex from "vuex";
    
    export const test1 = {
      namespaced: true,
      state: {
        count: 0
      },
      mutations: {
        setCount(state, data) {
          state.count = data === "up" ? state.count + 1 : state.count - 1;
        }
      }
    };
    
[/code]

# store/modules/test2.js

test1と同じやつをtest2に改名して置いておきます.

# pages/index.vue

main.vueは何処に置けば良いのかわからなかったのでindex.vueを作成しました.

コード自体はそのままで良いようです.

[code]

    <template>
        <div>
            <button @click="count('up')">+</button>
            <button @click="count('down')">-</button>
            {{this.$store.state.test1.count}}
        </div>
    </template>
    
    <script>
    export default {
        name: 'main',
        methods: {
            count(pram) {
                this.$store.commit('test1/setCount', pram);
            }
        }
    };
    </script>
    
[/code]


CC BY-SA 4.0
2018-06-19T08:17:45.547
44882
2018-06-19T08:17:45.547
12216
44833
answer