More elegant one-way data flow using Vuex with v-model command

Overview

vuex-map-model

npm npm bundle size (minified + gzip)

More elegant one-way data flow using Vuex with v-model command

Install

npm:

npm install --save vuex-map-model

or yarn:

yarn add vuex-map-model

Usage

Basic example

Typically, you can simply import vuex-map-model into the component and add mutaion function to the corresponding store.

Component

<template>
  <div id="search">
    <input v-model="carStatus">
  </div>
</template>

<script>
import mapModel from 'vuex-map-model';

export default {
  computed: {
    // The `mapModel` function takes an plain object of `model expression` and
    // generates corresponding computed properties with getter and
    // setter functions for accessing the Vuex store.
    ...mapModel({
      carUniqueMapped: ['cars.serach', 'cars/updateCarUnique'],
    })
  },
};
</script>

Store

@/store/module/cars:

export default {
  namespaced: true,
  state: {
    carUnique: '',
  },
  mutations: {
    // Once the `this.carUnique` changed, `vuex-map-model` will
    // commit a payload to the Vuex store
    //
    // @example
    // <= this.carUnique = 'TRS012333G7'
    // => payload: 'TRS012333G7'
    updateCarUnique (state, payload) {
      state.carUnique = payload
    },
  },
  actions: {...}
}

Nested fields

In some cases, you need to define multiple fields at the similar situation, such as the query boxes for the list, then you can use arrays to merge updates for fields quickly.

Component

<template>
  <div id="search">
    <input v-model="carUnique">
    <input v-model="carStatus">
  </div>
</template>

<script>
import mapModel from 'vuex-map-model';

export default {
  computed: {
    // The `mapModel` function takes an array of `model expression`
    // different than before.
    //
    // The following expression are supported:
    // Expression A: [fieldPath, mutationType, fieldA, fieldB...]
    // Expression B: [fieldPath, mutationType, [fieldA, fieldB...]]
    // => this.fieldA, this.fieldB, this.search
    ...mapModel([
      ['cars.search', 'cars/updateSearch', 'carUnique', 'carStatus'],
      // or ['cars.search', 'cars/updateSearch', ['carUnique', 'carStatus']],
      // or ['car.search.carUnique', 'cars/updateCarUnique']
      //  + ['car.search.carStatus', 'cars/updateCarStatus']
    ]),
  },
};
</script>

Store

@/store/module/cars:

const initState = () => ({
  search: {
    carUnique: '',
    carStatus: '',
  },
  loading: false,
  ...
})

export default {
  namespaced: true,
  state: initState(),
  mutations: {
    // Once the `this.carUnique` or `this.search` changed, `vuex-map-model` will
    // commit a payload to the Vuex store
    //
    // @example
    // <= this.carUnique = 'TRS012333G7'
    // => payload: { carUnique: 'TRS012333G7' }
    // <= this.search = { carStatus: 2 }
    // => payload: { carStatus: 2 }
    updateSearch (state, payload) {
      Object.assign(state.search, payload)
    },
    resetSearch (state) {
      state.search = initState().search
    },
  },
  actions: {...}
}

Attention

We strongly oppose the use in places where there is no v-model, please reference Two-way Computed Property

License

MIT

Owner
Jory Liang
stay young
Jory Liang
Universal Model for Vue

Universal Model for Vue Universal model is a model which can be used with any of following UI frameworks: Angular 2+ universal-model-angular React 16.

Universal Model 25 Oct 27, 2021
Todos-VUEX - A todo list made using Vue, Vuex, Axios and JSON Placeholder API.

todos Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and

Lasanja 0 Jan 3, 2022
Use a JSONAPI api with a Vuex store, with data restructuring/normalization.

jsonapi-vuex A module to access JSONAPI data from an API, using a Vuex store, restructured to make life easier. Vue 3 - v5 and later supports only Vue

Matthew Richardson 142 Dec 6, 2021
Vue and Vuex plugin to persistence data with localStorage/sessionStorage

vuejs-storage Vue.js and Vuex plugin to persistence data with localStorage/sessionStorage Purpose This plugin provide a simple binding with localStora

maple 118 Sep 18, 2021
A plugin for syncing Vuex store with js-data

vuex-jsdata-plugin A simple attempt to help using jsdata alongside Vue.js: This plugin syncing Vuex store with js-data After each injection made by js

Alexandre Bonaventure Geissmann 20 Jul 30, 2020
vuex-module-generator - It allows you to create a vuex module easily.

Vuex Module Generator (VMG) VMG allows you to create a vuex module easily. See All implementations. See Customer Example. Supported module types Clone

Abdullah 89 Oct 20, 2021
The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.

Vuex ORM ?? HEADS UP! Currently, Vuex ORM Next project is on going, and we are hoping it is going to be the foundation of the version 1.0.0 release. W

Vuex ORM 2.3k Jan 17, 2022
A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth

Laravel 6 (LTS) Vue.js Frontend Boilerplate A Vue.js Frontend starter project kit template/boilerplate with Laravel 6 Backend API support. Features Re

MUWONGE HASSAN 2 Oct 12, 2021
Easily share reactive data between your Vue components.

vue-stash A Vue.js plugin that makes it easy to share reactive data between components. This plugin is best suited for the rapid development of protot

Cody Mercer 411 Jan 12, 2022
A mostly reasonable alternative to Vuex

Tuex (beta) A simpler Vuex alternative written in TypeScript. (TypeScript + Vuex) - Complexity = Tuex Full Documentation About Tuex is a reactive cent

Alexey Iskhakov 33 Sep 25, 2021
:seedling: Vue and vuex based library, writing less verbose code.

lue ?? Vue and vuex based library, writing less verbose code. Installation Install the pkg with npm: npm install lue --save or yarn yarn add lue Bas

Pomy 12 Jul 30, 2020
📦 Fast, Simple, and Lightweight State Manager for Vue 3.0 built with composition API, inspired by Vuex.

v-bucket NPM STATUS: ?? Fast, Simple, and Lightweight State Management for Vue 3.0 built with composition API, inspired by Vuex. Table of Contents Mai

mehdi 42 Jan 6, 2022
💾 Persist and rehydrate your Vuex state between page reloads.

vuex-persistedstate Persist and rehydrate your Vuex state between page reloads. Install npm install --save vuex-persistedstate The UMD build is also a

Robin van der Vleuten 5.6k Jan 21, 2022
A Vuex plugin to persist the store. (Fully Typescript enabled)

vuex-persist A Typescript-ready Vuex plugin that enables you to save the state of your app to a persisted storage like Cookies or localStorage. Info :

Arnav Gupta 1.5k Jan 18, 2022
Share vuex mutations between tabs/windows

vuex-shared-mutations Share certain Vuex mutations across multiple tabs/windows. Basic example Nuxt example Installation $ npm install vuex-shared-mut

Illya Klymov 557 Jan 7, 2022
cache vuex action when dispatch

vuex-cache Cache dispatched actions and prevent repeated requests and heavy actions. Compatibility Map and Promise are required (you can use polyfills

superwf 509 Jan 6, 2022
A utility to simplify the use of REST APIs with Vuex

vuex-rest-api A Helper utility to simplify the usage of REST APIs with Vuex 2. Uses the popular HTTP client axios for requests. Works with websanova/v

Christian Malek 383 Dec 22, 2021
⚙️ Developer tools for vue js (Vuex)

Introduction Vuenut is a Vue.js component that visualizes, manipulates, and saves state data from vuex. Advantage If your application uses a vuex stor

Lusaxweb 309 Jan 12, 2022
Modular security for Vue, Vuex, Vue-Router and Nuxt

vue-kindergarten Introduction vue-kindergarten is a plugin for VueJS 2.0 that integrates kindergarten into your VueJS applications. It helps you to au

Jiří Chára 308 Dec 31, 2021