chore(deps): update dependency vuex to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
vuex	3.6.2 -> 4.1.0

---

Release Notes

vuejs/vuex (vuex)

v4.1.0

Compare Source

Vue Core Version Requirement Change

This release contains an important fix (#​1883) that relies on the effectScope API from Vue core, which is only available in Vue 3.2+.

Bug Fixes

• build: node deprecated warning in export module (#​2048) (397e9fb)
• getters being destroyed on component destroy (#​1878) (#​1883) (b2f851f)

4.0.2 (2021-06-17)

Bug Fixes

• devtools: fix no getters displayed on root module + better getters inspector (#​1986) (bc20295)
• build: cjs build failing due to __VUE_PROD_DEVTOOLS__ defined (#​1991) (#​1992) (7151622)

4.0.1 (2021-05-24)

Features

• dx: add devtools integration (#​1949)

v4.0.2

Compare Source

Bug Fixes

• devtools: fix no getters displayed on root module + better getters inspector (#​1986) (bc20295)
• build: cjs build failing due to __VUE_PROD_DEVTOOLS__ defined (#​1991) (#​1992) (7151622)

v4.0.1

Compare Source

Features

• dx: add devtools integration (#​1949)

v4.0.0

Compare Source

This is the official Vuex 4 release.

The focus for Vuex 4 is compatibility. Vuex 4 supports Vue 3, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code with Vue 3.

There are a few breaking changes described in a later section, so please check them out.

You can find basic usage with both Option and Composition API in the example directory.

It's still released under next tag in NPM package as same as Vue 3. We're planning to remove next tag once Vue 3 is ready to remove it.

There have been a lot of contribution to make Vuex 4 stable. Thank you all for your very much appreciated help. It wouldn't have been possible without this wonderful Vue community!

Documentation

To check out docs, visit next.vuex.vuejs.org.

Breaking changes

Installation process has changed

To align with the new Vue 3 initialization process, the installation process of Vuex has changed.

To create a new store instance, users are now encouraged to use the newly introduced createStore function.

import { createStore } from 'vuex'

export const store = createStore({
  state() {
    return {
      count: 1
    }
  }
})

Whilst this is not technically a breaking change, you may still use the new Store(...) syntax, we recommend this approach to align with Vue 3 and Vue Router Next.

To install Vuex to a Vue instance, pass the store instance instead of Vuex.

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')

Bundles are now aligned with Vue 3

The following bundles are generated to align with Vue 3 bundles:

• vuex.global(.prod).js
  • For direct use with <script src="..."> in the browser. Exposes the Vuex global.
  • Global build is built as IIFE, and not UMD, and is only meant for direct use with <script src="...">.
  • Contains hard-coded prod/dev branches and the prod build is pre-minified. Use the .prod.js files for production.
• vuex.esm-browser(.prod).js
  • For use with native ES module imports (including module supporting browsers via <script type="module">.
• vuex.esm-bundler.js
  • For use with bundlers such as webpack, rollup and parcel.
  • Leaves prod/dev branches with process.env.NODE_ENV guards (must be replaced by bundler).
  • Does not ship minified builds (to be done together with the rest of the code after bundling).
• vuex.cjs.js
  • For use in Node.js server-side rendering with require().

Typings for ComponentCustomProperties

Vuex 4 removes its global typings for this.$store within Vue Component to solve issue #​994. When used with TypeScript, you must declare your own module augmentation.

Place the following code in your project to allow this.$store to be typed correctly:

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@​vue/runtime-core' {
  // Declare your own store states.
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

createLogger function is exported from the core module

In Vuex 3, createLogger function was exported from vuex/dist/logger but it's now included in the core package. You should import the function directly from vuex package.

import { createLogger } from 'vuex'

Bug Fixes Included Since 4.0.0-rc.2

• export missing storeKey (4ab2947)
• fix tree shaking notworking in webpack bundle (#​1906) (#​1907) (aeddf7a)

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (0bb3b25) to head (599008b).

❗ Current head 599008b differs from pull request most recent head 73e8c4d. Consider uploading reports for the commit 73e8c4d to get more accurate results

Additional details and impacted files

@@            Coverage Diff            @@
##            master      #558   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            9         9           
  Lines          132       132           
  Branches        22        22           
=========================================
  Hits           132       132           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[renovate]

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

• any of the package files in this branch needs updating, or
• the branch becomes conflicted, or
• you click the rebase/retry checkbox if found above, or
• you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/vue
npm error   dev vue@"2.7.16" from the root project
npm error
npm error Could not resolve dependency:
npm error peer vue@"^3.2.0" from [email protected]
npm error node_modules/vuex
npm error   dev vuex@"4.1.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /tmp/renovate/cache/others/npm/_logs/2024-05-04T03_57_45_259Z-eresolve-report.txt

npm error A complete log of this run can be found in: /tmp/renovate/cache/others/npm/_logs/2024-05-04T03_57_45_259Z-debug-0.log