Search code examples
vue.jsvuex

sometimes when I use createApp(App).use(...)... everything disappear


I was trying to use vuex in my vue project.When I directly use the store everything is fine.But when I try to put the store in module then use it,everything just gone.

Also,if I import router from my router.js and use it ,everything will gone.

Super confused about it.

the way I directly use it

import a from "./store/modudel/a"

the way I put in module

// main.js
import store from "./store/index";

createApp(App)
  .use(store)
  .mount("#app");
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

import a from './module/a';

Vue.use(Vuex);

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


Solution

  • Your store/index.js contains code specific to Vue 2, but your main.js is for Vue 3. This code should be causing linter errors in the dev terminal or runtime errors in the browser console.

    Assuming you have a Vue 3 project with Vuex 4, the equivalent store code would be:

    // store/index.js
    import { createStore } from 'vuex';
    
    import a from './module/a';
    
    export default createStore({
      modules: {
        a
      }
    });