🚀 Socket Launch Week 🚀 Day 5: Introducing Socket Fix.Learn More
Socket
Sign inDemoInstall
Socket

vue-static

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-static

Vue.js plugin that allows you to disable reactivity for variables in Vue components

0.0.5
latest
Source
npm
Version published
Weekly downloads
245
-15.81%
Maintainers
1
Weekly downloads
 
Created
Source

Vue-Static

This plugin enables you to have variables in your Vue component that don't have reactivity.

Why

Sometimes you don't want reactivity for some of your variables e.g. because they contain other objects (leafletjs maps or similar) or because they are huge and you don't need reactivity for them (e.g. big objects).

Installation

$ npm i vue-static

in your main.js:

import VueStatic from 'vue-static'
Vue.use(VueStatic);

Usage

<template>
    <div>
        <p>
            Just use it like a normal variable: {{untracked_variable}}
        </p>
    </div>
</template>
<script>
export default {
    static() {
        return {
            untracked_variable: 'some variable without reactivity',
        };
    },
    mounted() {
        // the template won't update because the variable doesn't have reactivity
        this.untracked_variable = 'you can use it like a normal variable';
    },
};
</script>

static can be a function or an object (like data).

Custom Merge Strategy

Internally, this plugin uses Vue's $options (specifically $options.static). Therefore you can use custom merge strategies. By default it uses the same strategy for merges as data (Vue.config.optionMergeStrategies.data). Thanks to Akryum for the idea.

Namespace

There's an option called namespaced so that all static data will be namespaced into $static component property. This is solely to avoid conflicts with other options and reactive data (same name, for instance), and helps you to remember which data is or isn't reactive.

import VueStatic from 'vue-static'
Vue.use(VueStatic, {
    namespaced: true,
});

Just use this.$static.variable instead of this.variable in your code and $static.variable instead of variable in your template. Thanks to matheusgrieger for the idea. See here for example usage.

Name

There's an option called name so that the static function/object can be renamed. This addresses the issue that static is a reserved keyword. If you have problems to use static as the default name, you can change it.

import VueStatic from 'vue-static'
Vue.use(VueStatic, {
    name: 'basedata',
});

Keywords

vue

FAQs

Package last updated on 14 Dec 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts