I am searching for the best approach to change Vue variable value outside of ponent. I'm using Vue webpack as well.
I have created a project using vue webpack. Inside its default App.vue file, I have a variable. For example, let's take showModal and its default value is false. Then I built it in a single javascript file.
<button>Register</button> {{-- event button --}}
<div id="guest"></div> {{-- Here I'm rendering my template --}}
<script src="{{ asset('js/vue-js/guest.js') }}"></script> {{-- builded Javascript file --}}
And the problem is that I want to change my showModal variable to true, but the event button it is not on my ponent template.
What is the best approach to acplish this?
I am searching for the best approach to change Vue variable value outside of ponent. I'm using Vue webpack as well.
I have created a project using vue webpack. Inside its default App.vue file, I have a variable. For example, let's take showModal and its default value is false. Then I built it in a single javascript file.
<button>Register</button> {{-- event button --}}
<div id="guest"></div> {{-- Here I'm rendering my template --}}
<script src="{{ asset('js/vue-js/guest.js') }}"></script> {{-- builded Javascript file --}}
And the problem is that I want to change my showModal variable to true, but the event button it is not on my ponent template.
What is the best approach to acplish this?
Share Improve this question edited Jul 4, 2018 at 17:33 Emile Bergeron 17.4k5 gold badges85 silver badges131 bronze badges asked Jul 4, 2018 at 12:30 bakisbakis 6753 gold badges9 silver badges25 bronze badges 2-
1
If you change the value from a parent ponent, utilizing one-way data flow approach, you can use
props. Otherwise, if it is from -let's say- kind of sibling ponents, you can use store like vuex. – vahdet Commented Jul 4, 2018 at 12:34 - @vahdet Best approaches wise your right about props but if OP's application is not very big then you might want to consider just a general repository pattern instead as per the docs. – li x Commented Jul 4, 2018 at 15:01
3 Answers
Reset to default 5If you want to access a vue ponent outside of vue you could register it to the window object and access it then from anywhere.
window.myVueComponent = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Now you can access it from anywhere else with
window.myVueComponent.myValue = 123
But this "style" is called global namespace pollution for reasons. ;)
I think it is better to extend your vue app so that the button is also within the vue-handled ponents.
Firstly, best approach wise it's prevalent to think about the relationships between your existing ponents and their relationships. So for instance if the information your trying to pass will be used in a direct sibling or further down the chain you could choose props.
If your dealing with two ponents that share no direct relationship other than there current state you will need to extrapolate to either using the repository pattern or Vuex (flux like state management library) where we can then pass a reference to state or into properties in the repository pattern.
FooRepository.js
export default class FooRepository {
SomeRef
ManyRef = []
addRef(name) {
this.someRef = name;
}
addRefs(names){
this.ManyRef.push(names);
}
}
The above can be instantiated in your App Layer and shared between your ponents using an instance property https://v2.vuejs/v2/cookbook/adding-instance-properties.html
Dependent on your apps size it might be time to include Vuex where we can save a reference directly into our state and use it in a simmilar manner as the repo pattern. Though as it's an officially supported package the setup and use is much simpler:
const store = new Vuex.Store({
state: {
ref: null
},
mutations: {
saveRef (state, pRef) {
state.ref = pRef
}
}
})
This is a very basic store that shows how we could save a reference into it, we can then access this reference in our ponents once we've registered the store inside main. This can be done using this.$store.state.ref. These two approaches are considered the best approach over simple simple props and or something like the event emitter for ponents that share no direct relationship.
Create a new Vue instance just for emitting, call it global event manager.
global.event = new Vue()
when you want to emit an event ( like modal )
global.event.$emit('close-modal', (optional msg))
when you want to close modal :
// In your ponent
created(){
var App = this;
global.event.$on('close-modal', (optional msg)=>{
this.showModal = false;
})
}
Similarly do it for opening the modal. If you are using the vue CDN (normal js file of vue), instead of global.event use window.event while creating and only event while using. In browser if a variable which is undeclared is used then it refers to the window object.