A guide to implementing Vuex in a Laravel and Vue 3 project

Currently, I am working on a Laravel + Vue 3 project and need to incorporate Vuex into the project. In my store.js file, I have configured my Vuex as shown below:

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");

In addition, my app.js file looks like this:

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

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

However, I am encountering difficulties in importing the store.js into the app.js file. Can you provide some guidance or solution for this issue?

Answer №1

It is highly recommended by Vue core team members, including Vuex authors, to use Pinia instead of Vuex for new projects. This recommendation can be found on the first page of the Vuex documentation.


Currently, you are developing two separate applications:

  • one in store.js (which contains only the store)
  • one in app.js (which includes everything except the store).

If you intend to incorporate the store into the app defined in app.js, it is advisable to export the store from store.js and import and utilize it within 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')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

exploring the network of connections

This is what the HTML structure of the webpage looks like: <body> <form> <input type='file'/> </form> <div id='list'> <div>value here<input id='delete' type='button'/>< ...

Refreshing data and manipulating arrays using AngularJS

Currently, I am developing an application utilizing AngularJS and LocalStorage. I've encountered a challenge that seems a bit too intricate for me to handle. The app involves managing lists of people with the ability to add arrays of names. The proce ...

What is the best way to create a continuous typewriter effect in Next.js?

I have a unique project that features a typewriter effect, but I'm encountering an issue where it only types the text once. What I really want is for the typewriter effect to continuously loop, starting over and typing out the words again. I've b ...

Customize Your Calendar: A Guide to Disabling Dates with Pikaday.js

Wondering how to disable specific days on a calendar? Look no further! Here's a solution using the `disableDayFn` option from Github: disableDayFn: callback function that gets passed a Date object for each day in view. Should return true to disable s ...

Should you stick with pre-defined styles or switch to dynamic inline style changes?

I am currently developing a custom element that displays playing cards using SVG images as the background. I want to make sure that the background image changes whenever the attributes related to the card's suit or rank are updated. From what I under ...

VueJS - Best practices for utilizing getters and computed properties efficiently

Vue.js has a special place in my heart, especially its computed properties and the magic of Vuex getters. However, I've reached a crossroads where I'm unsure if my current approach may be impacting performance. This pattern features prominently ...

Getting data from a document containing key value pairs

I have a collection of text files that are structured in a key-value pair format. "Site Code": "LEYB" "Also known as": "" "Location": "Pier Site, Poblacion del Sur, Villaba, Southern Leyte" "Contact person(s)": "" "Coordinates[1]": "11 ...

JavaScript - Modify input character prior to appending it to the text area

I am working on creating a virtual keyboard using jQuery. Whenever I press 'a' in the textarea, I want it to display 'z' instead. In my investigation of typing a letter in the textarea, I discovered the following sequence: keyDown ev ...

Guide on extracting data from an HTML table column and saving it to a JavaScript array with the help of JQuery

Suppose there is a table column containing 10 rows, each with <td id="num"> and some text value. Is there a way to utilize JQuery in order to iterate through every row within the column and store the values in a JavaScript array? I attempted the co ...

Ways to access and delete the canvas using ref steps?

Having a canvas in a react component, I utilized react refs to access the node and implemented a destroy() method. However, I encountered an error: TypeError: canvasRef.current.destroy is not a function How can we properly access the node (canvas) using r ...

Hiding the modal once the data has been successfully transmitted to the database

I am facing a challenge in my app where I need to close the modal after sending data to the database, but no matter what I try, I cannot seem to achieve it. Can anyone provide some guidance or assistance with this? :) <div class="container-fluid"&g ...

Combining a complete hierarchy of Object3D/Mesh into one merged entity

I'm currently working on a project that involves dynamically generating trees using simple cubes for branches and leaves in the early prototype stages. Each tree consists of a hierarchy of cubes nested with rotations and scaling to create the final st ...

Ways to implement StackNavigator along with Redux?

Is there anyone who can assist me in integrating StackNavigator and Redux? It seems straightforward, but I'm encountering issues. index.ios.js import React from 'react' import { AppRegistry } from 'react-native' import { Provi ...

The video.play() function encountered an unhandled rejection with a (notallowederror) on IOS

Using peer.js to stream video on a React app addVideoStream(videoElement: HTMLVideoElement, stream: MediaStream) { videoElement.srcObject = stream videoElement?.addEventListener('loadedmetadata', () => { videoElement.play() ...

Enhance the functionality of the Bootstrap navbar by enabling the slideUp and slideDown effects

I can't get jQuery's slideUp and slideDown methods to smoothly animate the Bootstrap navbar. When I tried using the slideUp method, the navbar only slid up a little before disappearing completely, and the same issue occurred with the slideDown me ...

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

I'm a beginner and encountered an error saying Uncaught TypeError: players.setAttribute is not a function when submitting an action. How can I solve this issue? Please share your insights. ''' //selecting all necessary elements const s ...

Node.js redirection techniques

Node JS is still very new to me and I'm having trouble redirecting buttons to another page. Every time I attempt to redirect, I receive a "cannot GET /(the page that I am trying to redirect to)" error message. The code snippet I'm using for redir ...

What is the best method to obtain the following id for an image?

Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...

Clicking the button will cause the React component to close itself automatically

Is there a way to make a React component self-close when a button within the component is clicked? Take a look at this code snippet: import React from 'react'; import PropTypes from 'prop-types'; const MyReactComponent = (props) => ...

Tips for determining whether the current request is an AJAX request in MVC3 view using JavaScript

I have a div with a maximum height and overflow set to auto. When the size of the div overflows, a scroll bar is automatically added. However, I have also set $("#itemsdiv").scrollTop(10000); so that the scroll bar is always at the bottom. Now, I want t ...