Nerfing Powerful Megalomaniacs

    vue-reactive-collection
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    vue-reactive-collection

    Installation

    Reactive Map and Set for Vue 2 using @vue/composition-api plugin.

    Make sure @vue/composition-api is installed since vue-reactive-collection is built upon it.

    NPM

    $ npm i vue-reactive-collection

    Yarn

    $ yarn add vue-reactive-collection

    Usage

    import { defineComponent } from '@vue/composition-api'
    import { useReactiveSet, useReactiveMap } from 'vue-reactive-collection'
    
    export default defineComponent({
      // ...
      setup() {
        const set = useReactiveSet()
        const map = useReactiveMap()
    
        return {
          set,
          map,
        }
      },
    })

    set and map will have the same methods as native Set and Map. They can be accessed via .value as you would do it with ref. The beauty of it is that they are completely reactive, so calling set.value.add/delete/clear or map.value.set/delete/clear will cause a template rerender.

    Motivation

    One of the Vue 2 drawbacks is the lack of a first class support for Map and Set. Though it has been recently implemented in Vue 3. The purpose of this library is to allow the usage of Map and Set in Vue 2 as you would use them in Vue 3.

    During Vue 3 migration useReactiveSet and useReactiveMap will be replaced with Vue ref.

    const set = useReactiveSet()

    will become

    const set = ref(new Set())

    That's it, that simple.

    The idea was adopted from @inca comment in this issue.

    Q&A

    How to pass an initial value

    You can pass an initial value as you would it with native Map and Set.

    const fruits = useReactiveSet(new Set(['apple', 'pear']))
    const vegetables = useReactiveSet(['cabbage', 'onion'])
    const fruits = useReactiveMap(
      new Map([
        ['apple', true],
        ['pear', true],
      ])
    )
    const vegetables = useReactiveMap([
      ['cabbage', true],
      ['onion', true],
    ])

    Tests

    npm test

    Build

    npm run build

    License

    MIT

    Install

    npm i vue-reactive-collection

    DownloadsWeekly Downloads

    7

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    17.3 kB

    Total Files

    19

    Last publish

    Collaborators

    • 3vil_arthas