feat: use a store for application state

3 files changed, 16 insertions, 2 deletions

diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 048f8f30..d13ef719 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -7,6 +7,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 // styles
 import 'element-plus/theme-chalk/index.css';
 import './style.css'
+import { store } from './plugins/store';
 
 const app = createApp(App);
 app.use(ElementPlus);
@@ -16,4 +17,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component);
 }
 
+// style
+app.use( store );
+
 app.mount('#app')
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
new file mode 100644
index 00000000..94464e3c
--- /dev/null
+++ b/src-vue/src/plugins/store.ts
@@ -0,0 +1,10 @@
+import { createStore } from 'vuex';
+
+export const store = createStore({
+    state () {
+      return {
+        installed_northstar_version: "1.9.7"
+      }
+    },
+    mutations: {}
+});
\ No newline at end of file
diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index 116d3649..4104f0ac 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -4,7 +4,7 @@
 <template>
     <div class="fc_launch__container">
         <div class="fc_title">Northstar</div>
-        <div class="fc_subtitle">Last updated: 23-09-2022 14:46</div>
+        <div class="fc_northstar__version">v{{ $store.state.installed_northstar_version }}</div>
         <el-button type="primary" size="large">Launch game</el-button>
     </div>
 </template>
@@ -31,7 +31,7 @@ button {
     font-weight: bold;
 }
 
-.fc_subtitle {
+.fc_northstar__version {
     color: rgb(168, 168, 168);
     margin-bottom: 20px;
 }