vuex | 🗃️ Centralized State Management for Vue.js | State Container library

• I have a plugin and this plugin uses Vuex

After updating my npm packages, some of the imports from the 'vue' module started showing errors:

TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'X'

where X is nextTick, onMounted, ref, watch etc. When serving the project, Vue says it's "failed to compile". WebStorm actually recognizes the exports, suggests them and shows types, but the error is shown regardless. Some exports like computed and defineComponent work just fine.

What I've tried:

• Rollback to the previously used Vue version "3.2.2" > "3.0.11". It makes the abovementioned type errors disappear, but the app stops working entirely, showing lots of TypeError: Object(...) is not a function errors in console and not rendering the app at all. In the terminal, some new warnings are introduced: "export 'X' (imported as '_X') was not found in 'vue' where X is createElementBlock, createElementVNode, normalizeClass and normalizeStyle.
• Rollback other dependencies. None of the ones that I tried helped fix the problem, unfortunately.
• Manually declare the entirety of 'vue' module. We can declare the 'vue' module exports in shims-vue.d.ts, and it actually makes the errors disappear, however, this seems like a terrible, time-consuming workaround, so I would opt out for a better solution if possible.

My full list of dependencies:

Consider the following:

I don't understand why I'm getting this error:

Argument of type '{ id: string; }' is not assignable to parameter of type 'never'.

... at the line const index = state.sections.findIndex((section) => section.id === id);

in the following portion of my Vue store:

So I have an action that makes a POST request to an endpoint that creates a comment for a particular artwork. On the components which renders the artwork and its comments, I dispatch an action in the onMounted() hook that makes a GET request for the artwork with that id, and then stores it in the Vuex.

Once the POST request that creates the comment goes through, I can access the artwork property in the store, and just push the response to the comments property which is an array of comments. I don't know if this is the correct way to do it though, since from what I understand any state change should be done through mutations, so directly accessing the state and pushing array elements into it seems incorrect?

This is my action that creates a comment and pushes the response to the selected artwork's comments property:

I have an application that uses Vue-Router and Vuex (Store).

On the Dashboard component, user information is shown. Vue pulls that user information from a database (async) and pushes it to the Store.

Now, in my subcomponents, I access this information via the Store. The problem is, on the initial loading of a subcomponent, the user entry in the store is empty. TypeError: $setup.user is null. Now, one way to get around this is to put a v-if in front of every element. However, I find this to be tidious.

Can I get around, putting a v-if in every html-element?

User.vue:

Hi i have a requirement of combining 2 vuex store into a single store (both stores are of different projects)

• dockerfile:

I'm trying to display a list of announcements (retrieved from API) on the page. I'm using Vuex store and I have a state called announcements. I also want this list to be updated every time the user refreshes/enters the page. So I used lifecycle hooks, particularly the mounted(). I have a dispatch function that takes a club ID as a parameter. The issue is that I try to access the announcement array in the Vue component, it is one "step" behind the version in the Vuex store.

The Following is in the Vue component ClubDetails.vue