Changing data in main app

I just want to change data in the main app instance

here is data
i have two things in cart contents , data

     data: function () {
            return {
                cart: {contents:[],data:{}},

and in the same main instance i added two method to change cart
methods :

addProduct: function (count, price, selected_options, item_data) {
                count: count, price: price, selected_options: selected_options, item_data: item_data
        } ,
  addCartData: function (dataName, dataValue) {

when i push element to contents using .push in the first method it is pushed that’s okay

when I push a key with value it to data object in the second method first it pushed
but when I navigate to another route it disappear and give me empty object instead like default

Do you do it in component or on main app object?

i made that in the main object at app initialization
and calling the methods from components

i found a solution but i think it the wrong way

  addCartData: function (dataName, dataValue) {

the first value assign make the change move to another pages
but doesn’t affect in the current page

the second value assign make the change affect the current page
but doesn’t affect in another pages

Well, it is actually happens because $root is not actually a link to, it is merge object of app data and app method. So to avoid such issue. Just reference $ and $app.methods instead of $root object

1 Like