Cannot set property of undefined (setting 'isRightSidebarExpanded')

Question

I'm trying to convert a template to use with nuxt.js

This property gave me this error

Cannot set property of undefined (setting "isRightSidebarExpanded")

@click="$store.global.isRightSidebarExpanded = false"

This is the JS file: https://lineone.piniastudio.com/js/app.js

I imported it into nuxt.js using this line in nuxt.config.js

script: [
     {src: '/js/app.js', body: false, defer:true}
     ]

Then nuxt.js shows me this error because it seems to ignore the client javascript files, although it works perfectly without nuxt.js, but only static HTML/JS files are included locally

You can see the website is working properly (Laravel) here https://lineone.piniastudio.com/

Some HTML variables (such as "activeTab") are also undefined

The property or method "activeTab" is not defined on the instance but is referenced during rendering. Make sure the property is reactive in data options or for class-based components by initializing it. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Propertie

But when I just keep the HTML/JS/CSS and make it work in static mode without nuxt.js, everything works fine

Answer 1

It is not recommended to change store data directly.
Vuex uses Mutations to commit changes to stored state.

1. Add a Mutation to change the isRightSidebarExpanded property

mutations: {
    isRightSidebarExpanded(state , payload) {
      // mutate state
      state.isRightSidebarExpanded = payload ;
    }
  }

2. Now you can call your Mutation

@click="$store.global.commit('isRightSidebarExpanded',false)"

-------------------------------------------------- ------------- ----------------------------------
For undefined questions:
-Check if $store.global property exists
- Check if you are using store (main.js)

app.use(store);