
Product
Introducing Socket Fix for Safe, Automated Dependency Upgrades
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Vue.js plugin that allows you to disable reactivity for variables in Vue components
This plugin enables you to have variables in your Vue component that don't have reactivity.
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).
$ npm i vue-static
in your main.js
:
import VueStatic from 'vue-static'
Vue.use(VueStatic);
<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
).
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.
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.
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',
});
FAQs
Vue.js plugin that allows you to disable reactivity for variables in Vue components
The npm package vue-static receives a total of 189 weekly downloads. As such, vue-static popularity was classified as not popular.
We found that vue-static demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.