18486 - Pinia Setup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fas-ui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "main": "./lib/lib.umd.min.js",
   "files": [
@@ -30,6 +30,7 @@
     "keycloak-js": "^9.0.3",
     "moment": "^2.29.1",
     "npm": "^7.19.0",
+    "pinia": "^2.1.7",
     "postcss-nesting": "^12.0.1",
     "sbc-common-components": "^3.0.9",
     "vite": "^4.5.0",
@@ -53,8 +54,8 @@
   },
   "devDependencies": {
     "@types/vuelidate": "^0.7.15",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^1.3.6",
@@ -67,7 +68,7 @@
     "jsdom": "^22.1.0",
     "sass": "~1.32.0",
     "sinon": "^15.0.4",
-    "typescript": "~4.1.5",
+    "typescript": "^4.5.5",
     "vitest": "^0.34.6",
     "vue-cli-plugin-vuetify": "~2.4.1",
     "vuetify-loader": "^1.7.0",

src/main.ts

@@ -14,7 +14,7 @@ import Vuelidate from 'vuelidate'
 import can from '@/directives/can'
 import initializeI18n from './plugins/i18n'
 import router from './router'
-import store from './store'
+import { getVuexStore, getPiniaStore } from './store'
 import vuetify from './plugins/vuetify'
 
 Vue.config.productionTip = false
@@ -88,12 +88,13 @@ function registerServiceWorker() {
   }
 }
 // setting to window to avoid library build undefined issue for global loader
-(window as any).fasStore = store
+(window as any).fasStore = getVuexStore
 
 function renderVue () {
   new Vue({
     router,
-    store,
+    store: getVuexStore,
+    pinia: getPiniaStore(),
     vuetify,
     i18n,
     render: h => h(App)

src/store/app.ts

@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia'
+import { reactive, toRefs } from '@vue/composition-api'
+
+// This store is the main store for the application
+/*
+Sniplet from: https://v3-migration.vuejs.org/breaking-changes/events-api.html
+In most circumstances, using a global event bus for communicating between components is discouraged.
+While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance
+headache in the long term. Depending on the circumstances, there are various alternatives to using an event bus:
+- Props and events should be your first choice for parent-child communication. Siblings can communicate via their parent.
+- Provide / inject allow a component to communicate with its slot contents. This is useful for tightly-coupled components
+  that are always used together.
+- Provide / inject can also be used for long-distance communication between components. It can help to avoid 'prop drilling',
+  where props need to be passed down through many levels of components that don't need those props themselves.
+- Prop drilling can also be avoided by refactoring to use slots.
+  If an interim component doesn't need the props then it might indicate a problem with separation of concerns.
+  Introducing a slot in that component allows the parent to create the content directly, so that props can be passed
+  without the interim component needing to get involved.
+- Global state management, such as Pinia.
+*/
+
+export const useAppStore = defineStore('app', () => {
+  const state = reactive({
+    errorMessage: '', // Unused for now
+    refreshKey: 0, // Unused for now
+    loading: true // Unused for now
+  })
+
+  function dismissError () {
+    state.errorMessage = ''
+  }
+
+  // Actions
+  function updateHeader () {
+    state.refreshKey++
+  }
+
+  function loadComplete () {
+    state.loading = false
+  }
+
+  return {
+    updateHeader,
+    loadComplete,
+    ...toRefs(state),
+    dismissError
+  }
+})

src/store/index.ts

@@ -2,13 +2,14 @@ import Vuex, { StoreOptions } from 'vuex'
 
 import { RootState } from './types'
 import Vue from 'vue'
+import { PiniaVuePlugin, createPinia } from 'pinia'
 
 Vue.use(Vuex)
 
 const debug = import.meta.env.NODE_ENV !== 'production'
 
 // Note: This is still required for sbc-common-components to work.
-const storeOptions: StoreOptions<RootState> = {
+const vuexStore: StoreOptions<RootState> = {
   strict: debug,
   state: () => ({
     refreshKey: 0,
@@ -28,4 +29,13 @@ const storeOptions: StoreOptions<RootState> = {
   modules: {
   }
 }
-export default new Vuex.Store<RootState>(storeOptions)
+export const getVuexStore = new Vuex.Store<RootState>(vuexStore)
+
+/**
+ * Configures and returns Pinia Store.
+ */
+export function getPiniaStore () {
+  Vue.use(PiniaVuePlugin)
+
+  return createPinia()
+}