Changing data in main app

Questions
1

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) {
             this.cart.contents.push({
                count: count, price: price, selected_options: selected_options, item_data: item_data
            })
        } ,
  addCartData: function (dataName, dataValue) {
            this.cart.data[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

2

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

3

i made that in the main object at app initialization
and calling the methods from components
using
this.$root.addCartData(.......)

i found a solution but i think it the wrong way

  addCartData: function (dataName, dataValue) {
            app.data.cart.data[dataName]=dataValue
            this.cart.data[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

4

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

1 Like