How to access data from outside the instance in Vue js?

Question

I'd like to get access to vm data from outside the instance like so:

myComponent.vue

export default {
    data() {
        return {
            name: 'Joe'
        };
    }
}

main.js

var vm = new Vue({
    el: '#app',
    render: h => h(myComponent)
});

Desired Result

console.log(vm.name);   // should return - Joe

For some reason, console returns undefined. What I'm doing wrong?

To add to the above, if I console.log(vm), it returns an object with all parameters just fine. But inside the object $data: (...) parameter doesn't have any data — Armand, Jul 16 '19 at 12:54
`vm.name` is data of root component, not `myApp.vue` component. — ittus, Jul 16 '19 at 13:51
in main.js: import myApp from './myApp'; and then use it in the example above — Armand, Jul 16 '19 at 14:05

score 8 · Accepted Answer · answered Jul 16 '19 at 13:10

8

To access vue.js object datas from inside you can use $property_name. Example

var vm = new Vue({
    el: '#app',
    data() {
      return {
        name: "Kapucni",
      }
    },
  template: '<div>{{ name }}</div>'
});

// use $name .property
console.log(vm.$data.name);
console.log(vm.$el);
// calling functions from $method, etc ...

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<div id='app'>
  
</div>

answered Jul 16 '19 at 13:10

Sabee

1,763
9
19

Hmm... for some reason this didn't work for me either. I'm using vue-cli and webpack, maybe some behaviour is different in this environment... $data object doesn't return anything – Armand Jul 16 '19 at 13:31
maybe upload your minimal project with settings to codesandbox – Sabee Jul 16 '19 at 13:34
1

For example from console in my Nuxt + Vue project I can access the data like `app.__vue__.$root.$data`, where `$root` is my component name – Sabee Jul 16 '19 at 13:53
thanks for this - I'm using vue via script and lost the vue context in an axios catch block for some reason – Michael Harper Jan 27 '20 at 12:08

score 2 · Answer 2 · answered Jul 16 '19 at 14:14

2

Thanks to comments from ittus, I realised that I have to look for child components, not the root component.

We can get to child component like so:

vm.$children[0].name

where $children[0] is a direct (and first in this case) child of the root component.

answered Jul 16 '19 at 14:14

Armand

2,611
2
24
39

1

Update; In 2022, $children has been removed from Vue 3. Just in case someone still looking for a solution, visiting [Vue 3 how to get information about $children](https://stackoverflow.com/questions/64154002/vue-3-how-to-get-information-about-children) may help. – Huy Phạm Mar 28 '22 at 04:19

Антон Баранов · Answer 3 · 2023-08-30T06:59:15.177

Best practices are using State in Vuex for unified data storage and secure and standardized data modification and retrieval. You can read more here: https://v3.vuex.vuejs.org/#what-is-a-state-management-pattern.

If you using State in Vuex and Vue 3 you can:

store.js

import 'es6-promise/auto';
import {createStore} from 'vuex'

export const store = createStore({
    state () {
        return {
            count: 1,
        }
    },
    mutations: {
        incrementCount (state) {
            state.count++
        },
        setCount (state, newValue) {
            state.count = newValue;
        },
    },
    getters: {
        getCount: state => {
            return '*' + state.count + '*';
        }
    }
})

app.js

import {store} from "./store"; 
const app = createApp({...})
app.use(store);
export const vue_app = app.mount('#vue_app');

and in Javascript to modify:

const store = vue_app.__vue_app__._context.provides.store; // Store instance
store._state.data.count; // get value
store.getters.getCount; // get value by the getter
store._mutations.incrementCount[0](); // modification by the mutation "incrementCount"
store._mutations.setCount[0](123); // modification by the mutation "setCount"
store._state.data.count = 123; // direct modification

How to access data from outside the instance in Vue js?

3 Answers3