Small shortcut for vuex function which could be used same as mapState or mapGetters

Related tags

Map vue-mapfields
Overview

Vue mapFields

Small shortcut for vuex function which could be used same as mapState or mapGetters.

Installation

npm i @vasiliyrusin/vue-mapfields

Types

interface Params {
  // object's properties
  fields: Array<string>;
  // path to object in state (from module root)
  base: string,
  // action name. Needs full path if namespace doesn't set.
  action: string
  // Deprecated. It will be removed soon.
  mutation: string
}

mapFields (namespace?: string, map: Params): Object

Example

store/carMarket/index.js

{
  state: {
    filters: {
      models: []
      datePicker: {
        dateStart: null;
        dateEnd: null;
      };
    }
  },
  
  actions: {
    // will be an object with filter name as key and value as the value
    updateFilters ({ commit }, filter) {
      console.log(filter) // { models: ['Tesla'] }
      commit("UPDATE_FILTERS", filter)
    },
  
    updateDatePicker ({ commit }, filter) {
      console.log(filter) // { dateStart: ['1970-01-01T00:00:00.000Z'] }
    }
  },
  
  mutations: {
    UPDATE_FILTERS (state, filters) {
      // method 1
      state.filters = { ...state.filters, ...filters };
      
      // method 2
      for (const [key, value] of Object.entries(filters)) {
        Vue.set(state.filters, key, value);
      }
    }
  }
}

components/carFilters.vue

{
  computed: {
    ...mapFields("carMarket", {
      fields: ["models"],
      base: "filters",
      action: updateFilters
    }),

    ...mapFields("carMarket", {
      fields: ["dateStart", "dateEnd"],
      base: "filters.datePicker",
      action: updateDatePicker
    })
  }
}
Issues
  • Bump lodash from 4.17.20 to 4.17.21

    Bump lodash from 4.17.20 to 4.17.21

    Bumps lodash from 4.17.20 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump browserslist from 4.16.3 to 4.16.6

    Bump browserslist from 4.16.3 to 4.16.6

    Bumps browserslist from 4.16.3 to 4.16.6.

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump postcss from 7.0.35 to 7.0.36

    Bump postcss from 7.0.35 to 7.0.36

    Bumps postcss from 7.0.35 to 7.0.36.

    Release notes

    Sourced from postcss's releases.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.
    Changelog

    Sourced from postcss's changelog.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump nanoid from 3.1.23 to 3.2.0

    Bump nanoid from 3.1.23 to 3.2.0

    Bumps nanoid from 3.1.23 to 3.2.0.

    Changelog

    Sourced from nanoid's changelog.

    Change Log

    This project adheres to Semantic Versioning.

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).

    3.1.30

    • Reduced size for project with brotli compression (by Anton Khlynovskiy).

    3.1.29

    • Reduced npm package size.

    3.1.28

    • Reduced npm package size.

    3.1.27

    • Cleaned dependencies from development tools.

    3.1.26

    • Improved performance (by Eitan Har-Shoshanim).
    • Reduced npm package size.

    3.1.25

    • Fixed browserify support.

    3.1.24

    • Fixed browserify support (by Artur Paikin).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Vasiliy Rusin
Vasiliy Rusin
a library of vue components used by mapping applications

phila-vue-mapping (@phila/vue-mapping in npmjs.com) phila-vue-mapping is a library of Vue components that can be used in mapping apps which use Vue.js

City of Philadelphia 48 Oct 27, 2021
A vue application which provides read-only function without authentication or post module

Elog mobile Elog mobile web pages developed and deployed at CSNS (China Spallation Neutron Source), it is a lightweight web application which provides

null 1 Nov 10, 2021
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.1k Jan 15, 2022
Vue-ShortKey - The ultimate shortcut plugin to improve the UX

Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener. Install npm install vue-shortkey --save Usage Vue.use(require

Fagner Araujo 787 Jan 9, 2022
Vue-ShortKey - The ultimate shortcut plugin to improve the UX

Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener. Install npm install vue-shortkey --save Usage Vue.use(require

Fagner Araujo 787 Jan 9, 2022
A chrome extension that allows a YouTube watcher to 'bookmark' different parts of a video so that they could come back to it later

A chrome extension that allows a YouTube watcher to 'bookmark' different parts of a video so that they could come back to it later. This is a personal project for fun and learning.

Brian Lin 6 Sep 8, 2021
Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

Oleksii Dubinin 0 Dec 26, 2021
OSL is a simple shared list web-application based on Node. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.

Our Shopping List OSL is a simple shared list application. Typical uses include shopping lists of course, and any other small todo-list that needs to

Anaël Ollier 8 Nov 30, 2021
🍔 vue-burger-button is a functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower than 700b and CSS min+gzip is lower than 400b).

vue-burguer-button A Vue burger button as functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower th

Vitor Luiz Cavalcanti 42 Nov 16, 2021
This is a vue component, which is sliding to unlock some functionalities, such as login or sign up. This is used to protect your web app from attack.

vue-drag-verify This is a vue component, which is sliding to unlock for login or sign up. This is used to protect your web app from bot attack. demo I

Ashley Lv 191 Jan 12, 2022
Named Entity Recognition (NER) Annotation tool for SpaCy. Generates Traning Data as a JSON which can be readily used.

NER Annotator for Spacy Starting the application Install the dependencies and start the Python Backend server python -m venv env source env/bin/activa

Arunmozhi 246 Jan 21, 2022
Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

vue-upload-component Vue.js file upload component The component is just a button Multi-file upload Upload directory Drag upload Drag the directory Upl

LianYue 2.4k Jan 13, 2022
The same features you expect from `input type="text"` but in a `contenteditable` Vue component

vue-input-contenteditable Make beautiful inputs without the restrictions of input[type='text']. A Vue component wrapper for contenteditable with all t

Cobertos / Samantha 16 Sep 2, 2021
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

İlker Güldalı 5 Jun 1, 2021
A simple image pop-up for keeping image previewing in same ratio

vue-mobile-image-uncover The simplest solution for putting varius ratio images, which you don't want to break your layout. Live Demo (WIP) Usage impor

guAnsunyata 8 Jul 29, 2020
Same Picture Game

SamePictureGame 90%이상... Javascipt 그리고 조금의 Vue..연습 같은그림 맞추기 게임입니다. ❤ Please Follow this ❤ Make Directory( mkdir [니가만들고싶은 폴더이름] ) in your Computer git

Hyeong Cheol Kim(トオル) 1 Dec 30, 2021
Vue.js prototype function `this.$isMobile()` that returns a Boolean value depending on whether or not the user is browsing with a mobile

vue-mobile-detection Vue.js prototype function this.$isMobile() that returns a Boolean value depending on whether or not the user is browsing with a m

Alberto Jerez 56 Dec 9, 2021
A Vue composition function that makes infinite scroll a breeze.

vue-use-infinite-scroll Installation npm i -S vue-use-infinite-scroll Usage template <div> <span>{{ errorMessageRef }}</span> <ul> <li

Andrea Simone Costa 102 Jan 12, 2022
local storage decorator and helper function in Vue

Vue Local Storage Decorator This library fully depends on vue-class-component. Description It persists the component data by using local storage Licen

Ken Cheung 19 Sep 13, 2021
Helper function for emitting events in Vue.js (functional) components

Vue emit Helper function to emit events from Vue.js functional components. Can be used in regular components too. CodeSandbox demo Installation yarn a

Mikhail Panichev 22 Jul 30, 2020
Provide the function to check slot like checking props.

vue-slot-checker vue-slot-checker provide functions like checking props. <template> <div> <header><slot name="header" /></header> <div><slot

mya-ake 14 Dec 22, 2020
📦Using a match function to automatic import your own Vue project's components

vue-automatic-import-loader Using a match function to automatic import your own project's components This repo copy from vuetify-loader and remove the

Hunter Liu 24 Jan 12, 2022
Handy debugging function for Vue

vue-clicky ??️ Handy debugging function for Vue. Right click any vue component, and it will show you neatly formatted info about it in the console. Li

Simon Herteby 113 Oct 4, 2021
Vue composition function for Form Validation

Form Validation for Vue 3 Vue composition function for Form Validation with async rules. ?? Written in TypeScript ?? Dynamic Form support ?? Light wei

null 16 Jan 9, 2022
CMS web page for the creation of small e-commerce developed with Laravel and Vue+Vuex

Delivery Service Descrizione il servizio deve permettere con facilita' la possibilita' per un utente di trovare i ristoranti/negozi/bar che fanno atti

null 0 Nov 28, 2021
:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)

VuePack is a modern Vue.js starter which uses Vue 2, Vuex, Vue-router and Webpack 2. Note I highly recommend you to try Poi, you can develop Vue.js ap

Kevin Hazy 2.5k Dec 27, 2021
vuex-loading-plugin The plugin which including to your modules loading logic

vuex-loading-plugin The plugin which including to your modules loading logic. When you will handle any actions you triggering loading mutation. When a

Stfalcon LLC 3 Jul 30, 2020
:chart_with_upwards_trend: Feature scoped Vuex modules to have a better organization of business logic code inside Vuex modules based on Large-scale Vuex application structures @3yourmind

vuex-feature-scoped-structure by igeligel A Vue.js/Vuex project showcasing a complex but scalable store structure. This project was created in coopera

Kevin Peters 222 Nov 21, 2021