A singular Vuejs Pinia store utilizing namespaced actions

Is it possible to separate pinia actions into two distinct namespaces, allowing access through properties n1 and n2 like this:

// current
store.n1a('hi')
store.n2b()
// wanted
store.n1.a('hi')
store.n2.b()

// cumbersome workaround:
store.namespace1().a('hi')
// store structure would resemble
  actions: {
    namespace1() {
      return {
        a(msg) {
          console.log(msg);
        }, 
      };
     ....
    },
  },

This approach greatly enhances the clarity of function naming, such as bath.paint() and kitchen.paint() instead of bathPaint(), etc. A similar concept can be found here: https://vuejs.org/api/options-state.html#expose

Answer №1

Pinia operates seamlessly without the need for a namespace.

Simply import to access another store effortlessly.

Explore More

I recommend setting up two distinct stores for easy access and management.

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

What is the best method to center a div on the screen?

Is there a way to have a div open in the center of the screen? ...

AngularJS - Issue: [ng:areq] The 'fn' argument provided is not a function, instead it is a string

I encountered an issue: Error: [ng:areq] Argument 'fn' is not a function, received string Despite following the recommendations of others, I still have not been able to resolve the problem. Below is the code snippet in question: controller. ...

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Currently, I am in the process of learning PHP and JavaScript. I have encountered a particular issue with a webpage setup. Let's say I have a page called page1 which consists of two input fields and a button labeled 'Go'. Upon clicking the & ...

Steps for eliminating a button when the API no longer provides any information

Everything is functioning smoothly with the code below, but I would like to enhance it so that when I call getNextPers() and there is no information available, the Ver Mais button disappears. I have been researching solutions without success, so any assi ...

Trouble with predefined JavaScript in Mongodb situation

Encountering the error "Missing ";" before statement" in Mongodb Atlas Online is frustrating for me as a newbie. Despite my efforts, I can't seem to figure out why the following code snippets are causing this issue: const counter = await counterCollec ...

Creating a canvas texture on tube geometry with three.js for optimal display on iPad devices

I have a 3D model of a tube geometry with 18000 coordinates on the production side. To simplify, I am selecting every 9th coordinate to plot 9000 coordinates for building the tube geometry using only the CanvasRenderer. When utilizing vertexColors: THREE. ...

Identifying the color category based on the color code in the props and displaying JSX output

I am in need of a solution to display colors in a table cell. The color codes are stored in mongodb along with their descriptions. I am looking for a library that can determine whether the color code provided is in RGB or hex format, and then render it acc ...

Navigating with Angular Material and md-nav-bar for efficient routing

Currently, I am delving into Angular and have opted to utilize the Angular Material library for my initial application. After tweaking some basic code borrowed from this source, which I adjusted to suit my requirements, I encountered difficulties with rout ...

Tips for placing <div .right> above <div .left> when the window is small, given that <div .right> is positioned to the right of <div .left> when the window is large

I've come across a similar layout before, but I'm struggling to replicate it myself. The idea is to have text aligned on the left side with an image floated to the right. Instead of the image appearing below the text when the window size is red ...

Performing three consecutive Ajax requests in a Rails application

Recently, I developed a custom admin system for a local gym to manage payments, attendance, mailing, sales, and more. While everything is functioning smoothly, there seems to be an issue with the attendance feature. Occasionally, when taking attendance, an ...

Leverage a single JavaScript file across all Vue components without the need for individual imports

My project includes a JavaScript file called Constant.js that stores all API names. //Constant.js export default { api1: 'api1', api2: 'api2', ... ... ... } Is there a way to utilize this file without having to impo ...

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...

Carry out numerous commitments across a range of elements

I have a list of objectIds and I want to perform operations on different collections based on each Id. I prefer executing the operations sequentially. var removeOperation = function(objectified){ return Comps.findOne({reviews : objectified}).populate([ ...

Transfer the browserify process into a specific gulp task that includes vueify, browserify, and babelify

I am in the process of transitioning the existing browserify workflow into a single gulp task: package.json: "scripts": { "build": "browserify src/main.js > dist/build.js" }, ... "browserify": { "transform": [ "vueify", "babelify" ] } . ...

Calculating the total number of clicks on a button using PHP

I am attempting to track the total number of clicks on a button by individual users, rather than combining all members' clicks. Each user's clicks on the button should be logged separately. I am struggling to determine the best approach for this ...

AngularJS allows for submitting form data to a new window by utilizing the form

At the moment, I have a JavaScript function that sends a form POST request and opens it in a new window. Now, I want to convert this into AngularJS. Here's the current function. The three parameters passed in determine the post URL and some data valu ...

Adding a function into a node within PostgreSQL

Hi there, I'm currently following a tutorial and attempting to execute a simple insert query, however, I keep encountering a 404 error. I am using Postman to input values. function function insertUser(req, res, next){ req.body.users = parseInt(r ...

Error: Exceeded the hook limit during rendering - reactjs problem

I keep encountering an issue when trying to retrieve main data using useSwr, where I call another function with axios and end up with an Uncaught Error: Rendered more hooks than during the previous render. I've attempted to troubleshoot this countless ...

Issue with managing timezones in Angular with CDT/CST offsets

I have a date in UTC format that I need to convert to CST. It is 5 hours ahead of UTC during CDT and 6 hours ahead during CTC. The UTC date is '2016-09-07T05:00:00Z' <body> <div ng-app="myApp" ng-controller="datCtrl"> <p>Da ...

AngularJS has encountered an error due to exceeding the maximum call stack size limit

Utilizing AngularJS and a web API, I am fetching data from an SQL table. I have designed a function that populates input fields with values when a row is selected from an HTML table. However, I encountered an error during debugging when clicking on any row ...