The cdn references
As usual, we want to keep the global space relatively uncluttered, so as per the template we’ll create the vuex store as a member of the Store namespace. The first job is to create the initial state of the store and define the getter, mutations and actions. The benefit of using Vuex is that it provides a focal point for all state changes and actions that modify state, and UI Vue components can automatically adapt rendering to the current state.
Vuex provides some handy mappers that make it easy to include store defintions in Vue components. I’m taking this a bit further by automatically generating the mappers from the initial structure of the store.
Now there’s argument that says that components should only map the state, getters, mutations and actions they plan to reference, but almost by definition, add-ons are going to be rather small so the convenience of mapping the entire store and including the mappings in each component is probably a fair tradeoff.
Using this approach anything from the Vuex store can easily be exposed in any component as easily as this
Initializing the store
We of course can’t initialize the store until we’ve imported Vue, Vuex and especially if we’re importing module that might be a bit later, so I always like to include an .init method which contains things that can only be executed when all the scripts are imported and the Dom is settled. Here’s the init
which is executed as part of the main initialization
Vuex and Qottle recipe: How to manage an asynchronous polling queue make a useful combination to invisibly handle keeping the add-on view of the spreadsheet data in sync. Polling communicates with the Server for the latest view of the data, and transfers only changes to the sheet content. The data is then reconstructed. The reactivity of Vuex means that the Vue components will only be re-rendered if there’s been any changes in the spreadsheet, and all this can happen without caring about the details of how all that happens.
Indeed, this is all that’s required in a Vue component to know what’s the latest data in the users tab of a spreadsheet is
If you’re using the template from How to use Vue.js, Vuex and Vuetify to create Google Apps Script Add-ons implementing Vuex in your add-on is rather straightforward (and highly recommended)