working with Laravel Vue 3 project. I need work with Vuex in the project. I have configure My Vuex in store.js file as following

import { createApp } from 'vue'
import { createStore } from 'vuex'

const store = createStore({
      /* state, actions, mutations */
    state : {
        counter : 1000
    }
    
    });
      
const app = createApp();
app.use(store);
app.mount("#app");

and My app.js file as following

import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import common from './common'
import store from './store' //import store.js

createApp({
    components: {
        mainapp,
        
    }
    
}).use(router).use(ViewUIPlus).mixin(common).mount('#app');

now I am unable to how to import store.js in to the app.js file. could you give some solution here

CodePudding user response：

Important note: Vue core team members (including Vuex authors) highly recommend using Pinia instead of Vuex for new projects, on the very first page of Vuex docs.

You're currently creating two separate apps:

• one in store.js (which has the store but nothing else)
• one in app.js (which has everything but the store).

You probably want to add the store to the app in app.js, not to a separate app. You should export the store from store.js and import use it into app.js:

store.js

export const store = createStore({
  //...
})

app.js:

import { store } from './store'

const app = createApp({
  //...
})
  .use(router)
  .use(store)
  .use(ViewUIPlus)
  .mixin(common)
  .mount('#app')