npmpackage.info

Gathering detailed insights and metrics for vuex-bound

vuex-bound - 1.3.2 | npmpackage.info

vuex-bound

Vue two-way binding (v-model) for Vuex state and mutations.

1.3.2

MIT

JavaScript

26.40 kB

1.7

Installations

npm install vuex-bound

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, UMD

Node Version

14.16.0

NPM Version

6.14.11 Pull Requests

Open

8

Total

15

Closed

6

Merged

1

Issues

Open

0

Total

3

Closed

3

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

Vanilla-IceCream

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

44 Stars

46 Commits

4 Forks

2 Watchers

9 Branches

2 Contributors

Updated on Feb 28, 2025

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

1.3.2

Package Id

vuex-bound@1.3.2

Unpacked Size

26.40 kB

Size

5.67 kB

File Count

NPM Version

6.14.11

Node Version

14.16.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

vuex-bound

Vue two-way binding (v-model) for Vuex state and mutations.

Installation and Usage

1$ npm i vuex-bound -S
2# or
3$ pnpm i vuex-bound -S
4# or
5$ yarn add vuex-bound

1// for commonjs
2const { mapModel, updateModel } = require('vuex-bound');
3
4// for es modules
5import { mapModel, updateModel } from 'vuex-bound';

Getting Started

Global

1/**
2 * Vuex 3
3 */
4import Vue from 'vue';
5import Vuex from 'vuex';
6import createLogger from 'vuex/dist/logger';
7import { updateModel } from 'vuex-bound';
8
9Vue.use(Vuex);
10
11const store = new Vuex.Store({
12  state: {
13    foo: '',
14    bar: { baz: '' },
15    db: [
16      { mongo: '3' },
17    ],
18  },
19  getters: {},
20  mutations: { ...updateModel() },
21  actions: {},
22  plugins: [createLogger({ collapsed: false })],
23});
24
25export default store;
26
27/**
28 * Vuex 4
29 */
30import { createStore, createLogger } from 'vuex';
31import { updateModel } from 'vuex-bound';
32
33export const store = createStore({
34  state: {
35    foo: '',
36    bar: { baz: '' },
37    db: [
38      { mongo: '3' },
39    ],
40  },
41  getters: {},
42  mutations: { ...updateModel() },
43  actions: {},
44  plugins: [createLogger({ collapsed: false })],
45});

1<template>
2  <div>
3    <!-- basic -->
4    <input v-model="foo"> {{ foo }}
5
6    <!-- custom name -->
7    <input v-model="fooCustom"> {{ fooCustom }}
8
9    <!-- nested object -->
10    <input v-model="barBaz"> {{ barBaz }}
11
12    <!-- nested object with array -->
13    <input v-model="mongo"> {{ mongo }}
14  </div>
15</template>
16
17<script>
18import { mapModel } from 'vuex-bound';
19
20export default {
21  computed: {
22    // your model
23    ...mapModel(['foo']),
24    // equal to
25    ...mapModel({ foo: state => state.foo }),
26
27    ...mapModel({
28      // custom name
29      fooCustom: state => state.foo,
30
31      // nested object
32      barBaz: state => state.bar.baz,
33
34      // nested object with array
35      mongo: state => state.db[0].mongo,
36    }),
37  },
38};
39</script>

:warning: WARNING

Frankly, state is static, you cannot use destructuring assignment and rename it because it will not be able to update the value.

Modules

1/**
2 * Vuex 3
3 */
4import Vue from 'vue';
5import Vuex from 'vuex';
6import createLogger from 'vuex/dist/logger';
7import { updateModel } from 'vuex-bound';
8
9Vue.use(Vuex);
10
11const store = new Vuex.Store({
12  modules: {
13    a: {
14      namespaced: true,
15      modules: {
16        b: {
17          namespaced: true,
18          state: {
19            foo: '',
20            bar: { baz: '' },
21            db: [
22              { mongo: '3' },
23            ],
24          },
25          actions: {},
26          mutations: { ...updateModel() },
27          getters: {},
28        },
29      },
30    },
31  },
32  plugins: [createLogger({ collapsed: false })],
33});
34
35export default store;
36
37/**
38 * Vuex 4
39 */
40import { createStore, createLogger } from 'vuex';
41import { updateModel } from 'vuex-bound';
42
43export const store = createStore({
44  modules: {
45    a: {
46      namespaced: true,
47      modules: {
48        b: {
49          namespaced: true,
50          state: {
51            foo: '',
52            bar: { baz: '' },
53            db: [
54              { mongo: '3' },
55            ],
56          },
57          actions: {},
58          mutations: { ...updateModel() },
59          getters: {},
60        },
61      },
62    },
63  },
64  plugins: [createLogger({ collapsed: false })],
65});

1<template>
2  <div>
3    <!-- basic -->
4    <input v-model="foo"> {{ foo }}
5
6    <!-- custom name -->
7    <input v-model="fooCustom"> {{ fooCustom }}
8
9    <!-- nested object -->
10    <input v-model="barBaz"> {{ barBaz }}
11
12    <!-- nested object with array -->
13    <input v-model="mongo"> {{ mongo }}
14  </div>
15</template>
16
17<script>
18import { mapModel } from 'vuex-bound';
19
20export default {
21  computed: {
22    // your model
23    ...mapModel('a/b', ['foo']),
24    // equal to
25    ...mapModel('a/b', { foo: state => state.foo }),
26
27    ...mapModel('a/b', {
28      // custom name
29      fooCustom: state => state.foo,
30
31      // nested object
32      barBaz: state => state.bar.baz,
33
34      // nested object with array
35      mongo: state => state.db[0].mongo,
36    }),
37  },
38};
39</script>

API

`mapModel`

Type: mapModel(namespace?: string, map: Array<string> | Object<function>): Object

`updateModel`

Type: updateModel(): Object

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

75 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

vuex-bound

Installations

Developer Guide

Yes

CommonJS, UMD

14.16.0

6.14.11

Pull Requests

8

15

6

1

Issues

0

3

3

Releases

Unable to fetch releases

Languages

Developer

Vanilla-IceCream

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Peer Dependencies

Dev Dependencies

vuex-bound

Installation and Usage

Getting Started

Global

Modules

API

mapModel

updateModel

10

10

0

0

0

0

0

0

0

0

1.7

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads

`mapModel`

`updateModel`